@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

@keyframes ticker {
	0% {
		transform: translateX(-100%); /* Start off the screen to the left */
	}

	100% {
		transform: translateX(100%); /* Move across to the right */
	}
}

.news {
	box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
	width: 98.9%;
	height: 37px;
	margin: 50px auto 3px;
	overflow: hidden;
	border-radius: 4px;
	padding: 3px;
	-webkit-user-select: none;
	position: relative; /* Added for absolute positioning */
}

	.news span {
		float: right;
		color: #fff;
		position: relative;
		top: 1%;
		border-radius: 4px;
		box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
		font-size: 16px;
		-webkit-font-smoothing: antialiased;
		-webkit-user-select: none;
		cursor: pointer;
		direction: rtl;
		padding-bottom: 3px;
		margin: 1px;
		z-index: 1; /* Ensure span is above ul */
	}

	.news ul {
		display: inline-flex;
		position: absolute;
		top: 2px;
		white-space: nowrap; /* Prevents text wrapping */
		/* news slid speed  */
		animation: ticker 20s linear infinite;
		-webkit-user-select: none;
		z-index: 0; /* Ensure ul is behind span */
	}

		.news ul li {
			line-height: 30px;
			list-style: none;
			display: inline;
			position: relative; /* For positioning pseudo-elements */
			margin: 0 6px;
		}

			.news ul li a {
				color: #fff;
				text-decoration: none;
				font: 14px Helvetica, Arial, sans-serif;
				-webkit-font-smoothing: antialiased;
				-webkit-user-select: none;
			}

			.news ul li::before {
				content: "";
				color: #fff;
				margin-right: 10px;
				font: 14px Helvetica, Arial, sans-serif;
				-webkit-font-smoothing: antialiased;
				-webkit-user-select: none;
				position: absolute;
				left: -15px; /* Positioning dash before the item */
				top: 50%;
				transform: translateY(-50%);
			}

			.news ul li:first-child::before {
				content: ""; /* Remove dash before the first item */
			}

			.news ul li::after {
				content: "-";
				margin-right: 5px;
				color: #fff;
				margin-left: 10px;
				font: 14px Helvetica, Arial, sans-serif;
				-webkit-font-smoothing: antialiased;
				-webkit-user-select: none;
				position: absolute;
				right: -15px; /* Positioning dash after the item */
				top: 50%;
				transform: translateY(-50%);
			}

			.news ul li:last-child::after {
				content: ""; /* Remove dash after the last item */
			}


		.news ul:hover {
			animation-play-state: paused;
		}

	.news span:hover + ul {
		animation-play-state: paused;
	}

/* OTHER COLORS */
.blue {
	background: #347fd0;
}

	.blue span {
		background: #2c66be;
	}

.red {
	background: #d23435;
}

	.red span {
		background: #c22b2c;
		margin: 0 4px;
	}

.green {
	background: #699B67;
}

	.green span {
		background: #547d52;
	}

.magenta {
	background: #b63ace;
}

	.magenta span {
		background: #842696;
	}

.yellow {
	background: yellow;
}

	.yellow span {
		background: yellow;
	}

@media only screen and (max-width: 768px) {
	.news ul {
		position: absolute;
		top: 0;
		left: -100%; /* Start from the left */
		white-space: nowrap; /* Prevents text wrapping */
		animation: ticker 20s linear infinite; /* Increased duration for slower scrolling */
		-webkit-user-select: none;
		z-index: 0; /* Ensure ul is behind span */
		display: inline-flex;
	}

		.news ul li {
			display: inline;
			padding-right: 20px; /* Added padding between news items */
		}

	.news span {
		margin: 0 4px;
		float: left;
		color: #fff;
		position: relative;
		top: 1%;
		border-radius: 4px;
		box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
		font-size: 16px;
		-webkit-font-smoothing: antialiased;
		-webkit-user-select: none;
		cursor: pointer;
		direction: rtl;
		padding-bottom: 3px;
		margin: 1px;
		z-index: 1;
	}

	.news ul:hover {
		animation-play-state: paused;
	}

	.news span:hover + ul {
		animation-play-state: paused;
	}
}



/*@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@keyframes ticker {
	0%   {margin-top: 0}
	25%  {margin-top: -30px}
	50%  {margin-top: -60px}
	75%  {margin-top: -90px}
	100% {margin-top: 0}
}



.news {
  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
  width: 350px;
  height: 37px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 4px;
  padding: 3px;
  -webkit-user-select: none
} 
.full-width{
    width: 100%;
}
.news span {
	float: left;
	float: right;
	color: #fff;*/
	/*padding: 6px;*/
	/*position: relative;
	top: 1%;
	border-radius: 4px;
	box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);*/
	/*font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;*/
	/*font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	cursor: pointer;
	direction: rtl;
	padding-bottom: 3px;
	margin: 1px;
}

.news ul {
  float: right;
  padding-right: 20px;
  animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
  -webkit-user-select: none
}

.news ul li {line-height: 30px; list-style: none }

.news ul li a {
  color: #fff;
  text-decoration: none;
  font: 14px Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none
}

.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }*/

/* OTHER COLORS */
/*.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }

.yellow {background : yellow}
.yellow span {background : yellow}*/