@charset "utf-8";
/* CSS Document */

a.marquee { color: #FFF; text-decoration: none; }
a.marquee:hover { color: #FF0; }

.marquee {
	position: relative; width:61%; padding: 0 3% 0 3%; float: left;
	height: 22px; margin: 0 0 0.5% 0; border: none;
	overflow: hidden; background-color: #F03; 

    -webkit-border-radius: 5px;
    border-radius: 5px;

	-webkit-transition: background-color 350ms;
	-moz-transition: background-color 350ms;
    transition: background-color 350ms;
}

.marquee p {
	position: absolute; width: 100%; height: 100%; margin: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:80%;
	text-align: center; line-height: 25px; color: #fff;
    text-shadow: 1px 1px 0px #555;
    filter: dropshadow(color=#555, offx=1, offy=1);

	transform:translateX(100%);
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);
}
.marquee p:nth-child(1) {
	animation: left-one 60s ease infinite;
	-moz-animation: left-one 60s ease infinite;
	-webkit-animation: left-one 60s ease infinite;
}
.marquee p:nth-child(2) {
	animation: left-two 60s ease infinite;
	-moz-animation: left-two 60s ease infinite;
	-webkit-animation: left-two 60s ease infinite;
}
.marquee p:nth-child(3) {
	animation: left-three 60s ease infinite;
	-moz-animation: left-three 60s ease infinite;
	-webkit-animation: left-three 60s ease infinite;
}
.marquee p:nth-child(4) {
	animation: left-four 60s ease infinite;
	-moz-animation: left-four 60s ease infinite;
	-webkit-animation: left-four 60s ease infinite;
}
.marquee p:nth-child(5) {
	animation: left-five 60s ease infinite;
	-moz-animation: left-five 60s ease infinite;
	-webkit-animation: left-five 60s ease infinite;
}

/*================================
	Move the Marquee to the Left
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
	0%	{
		-moz-transform:translateX(100%);
	}
	15% {
		-moz-transform:translateX(0);
	}
	20% {
		-moz-transform:translateX(0);
	}
	25% {
		-moz-transform:translateX(-100%);
	}
	100%{
		-moz-transform:translateX(-100%);
	}
}

@-moz-keyframes left-two {
	
	18% {
		-moz-transform:translateX(100%);
	}
	33% {
		-moz-transform:translateX(0);		
	}
	38% {
		-moz-transform:translateX(0);		
	}
	43%{
		-moz-transform:translateX(-100%);
	}
	100% {
		-moz-transform:translateX(-100%);
	}
}

@-moz-keyframes left-three {
	36%	{
		-moz-transform:translateX(100%);
	}
	51% {
		-moz-transform:translateX(0);
	}
	56% {
		-moz-transform:translateX(0);
	}
	61% {
		-moz-transform:translateX(-100%);
	}
	100%{
		-moz-transform:translateX(-100%);
	}
}

@-moz-keyframes left-four {
	54% {
		-moz-transform:translateX(100%);
	}
	69% {
		-moz-transform:translateX(0%);
	}
	74% {
		-moz-transform:translateX(0);		
	}
	79% {
		-moz-transform:translateX(-100%);		
	}
	100%{
		-moz-transform:translateX(-100%);
	}
}
@-moz-keyframes left-five {
	72% {
		-moz-transform:translateX(100%);
	}
	87% {
		-moz-transform:translateX(0%);
	}
	92% {
		-moz-transform:translateX(0);		
	}
	97% {
		-moz-transform:translateX(-100%);		
	}
	100%{
		-moz-transform:translateX(-100%);
	}
}



/** Webkit Keyframes **/
@-webkit-keyframes left-one {
	0% {
		-webkit-transform:translateX(100%);
	}
	15% {
		-webkit-transform:translateX(0);
	}
	20% {
		-webkit-transform:translateX(0);
	}
	25% {
		-webkit-transform:translateX(-100%);
	}
	100%{
		-webkit-transform:translateX(-100%);
	}
}
@-webkit-keyframes left-two {
	18% {
		-webkit-transform:translateX(100%);
	}
	33% {
		-webkit-transform:translateX(0);
	}
	38% {
		-webkit-transform:translateX(0);
	}
	43% {
		-webkit-transform:translateX(-100%);
	}
	100%{
		-webkit-transform:translateX(-100%);
	}
}
@-webkit-keyframes left-three {
	36% {
		-webkit-transform:translateX(100%);
	}
	51% {
		-webkit-transform:translateX(0);
	}
	56% {
		-webkit-transform:translateX(0);
	}
	61% {
		-webkit-transform:translateX(-100%);
	}
	100%{
		-webkit-transform:translateX(-100%);
	}
}
@-webkit-keyframes left-four {
	54% {
		-webkit-transform:translateX(100%);
	}
	69% {
		-webkit-transform:translateX(0);
	}
	74% {
		-webkit-transform:translateX(0);
	}
	79% {
		-webkit-transform:translateX(-100%);
	}
	100%{
		-webkit-transform:translateX(-100%);
	}
}
@-webkit-keyframes left-five {
	72% {
		-webkit-transform:translateX(100%);
	}
	87% {
		-webkit-transform:translateX(0);
	}
	92% {
		-webkit-transform:translateX(0);
	}
	97% {
		-webkit-transform:translateX(-100%);
	}
	100%{
		-webkit-transform:translateX(-100%);
	}
}


@media only screen and (min-width: 150px) and (max-width: 512px){
	.marquee{ width:94%; }  /* Hide Scrolling RSS News Items */
	
}