﻿
#container{
  position:relative;
  width:550px;
  height:75px;
  margin:0px auto;
   overflow:hidden;
   font-size:0.8em;
   font-family:Calibri;
  text-align:center;
  box-shadow:0 0 15px 0px rgba(0,0,0,1);

}

#demo{
	-webkit-animation: slide 50s linear infinite;
	-moz-animation: slide 50s linear infinite;
	-ms-animation: slide 50s linear infinite;
	-o-animation: slide 50s linear infinite;
	animation: slide 50s linear infinite;
	width: 2600px;
	height: 75px;
	background: #EEE;
	

}

#container:hover #demo{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}

#container:hover:after{
text-shadow:-1px -2px 3px #fff,1px 2px 3px #000;
position:absolute;
right:5px;
top:5px;
opacity:.6;
color:#bbb;
}

#demo span{
  display:block;
  float:left;
  width:100px;
  height:100%;
 

}

#demo span.left img{
  display:block;
  width:100px;
  height:100%;
}

#title {
	font-family:Calibri;
	font-size:1.0em;
	font-weight:bold;
	
}


@media only screen and (max-width: 1300px) {
#container{
  position:relative;
  width:250px;
  height:80px;
  margin:0px auto;
   overflow:hidden;
   font-size:0.8em;
   font-family:Calibri;
  text-align:center;
  box-shadow:0 0 15px 0px rgba(0,0,0,1);
}

#demo{
	
	width: 2600px;
	height: 75px;
	
	

}
#title {
	font-family:Calibri;
	font-size:1.0em;
	font-weight:bold;
	
}


}

@media only screen and (max-width: 700px) {
#container{
  position:relative;
  width:180px;
  height:60px;
  margin:0px auto;
   overflow:hidden;
   font-size:0.8em;
   font-family:Calibri;
  text-align:center;
  box-shadow:0 0 15px 0px rgba(0,0,0,1);
}
#demo{
	
	width: 2600px;
	height: 60px;
	
	

}
#title {
	font-family:Calibri;
	font-size:1.0em;
	font-weight:bold;
	
}


}

@media only screen and (max-width: 300px) {
#container{
  position:relative;
  width:120px;
  height:40px;
  margin:0px auto;
   overflow:hidden;
   font-size:0.8em;
   font-family:Calibri;
  text-align:center;
  box-shadow:0 0 15px 0px rgba(0,0,0,1);
}
#demo{
	
	width: 2600px;
	height: 40px;
}

#title {
	font-family:Calibri;
	font-size:0.7em;
	font-weight:normal;
	
}

}
@media only screen and (max-width: 200px) {
#title {
	font-family:Calibri;
	font-size:0.5em;
	font-weight:normal;
	
}

}

@-moz-keyframes slide{
0%   {margin-left:0px;}
4%   {margin-left:0px;}
8%  {margin-left:-100px;}
12%  {margin-left:-200px;}
16%  {margin-left:-300px;}
20%  {margin-left:-400px;} 
24%  {margin-left:-500px;}
28%  {margin-left:-600px;}  
32%  {margin-left:-700px;}
36%  {margin-left:-800px;}  
40%  {margin-left:-900px;} 
44%  {margin-left:-1000px;} 
48%  {margin-left:-1100px;} 
52%  {margin-left:-1200px;} 
56%  {margin-left:-1300px;} 
60%  {margin-left:-1400px;} 
64%  {margin-left:-1500px;} 
68%  {margin-left:-1600px;} 
72%  {margin-left:-1700px;} 
76%  {margin-left:-1800px;} 
80%  {margin-left:-1900px;} 
84%  {margin-left:-2000px;} 
88%  {margin-left:-2100px;} 
92%  {margin-left:-2200px;} 
96%  {margin-left:-2300px;} 
100%  {margin-left:-2400px;} 
}


@-webkit-keyframes slide{
0%   {margin-left:0px;}
4%   {margin-left:0px;}
8%  {margin-left:-100px;}
12%  {margin-left:-200px;}
16%  {margin-left:-300px;}
20%  {margin-left:-400px;} 
24%  {margin-left:-500px;}
28%  {margin-left:-600px;}  
32%  {margin-left:-700px;}
36%  {margin-left:-800px;}  
40%  {margin-left:-900px;} 
44%  {margin-left:-1000px;} 
48%  {margin-left:-1100px;} 
52%  {margin-left:-1200px;} 
56%  {margin-left:-1300px;} 
60%  {margin-left:-1400px;} 
64%  {margin-left:-1500px;} 
68%  {margin-left:-1600px;} 
72%  {margin-left:-1700px;} 
76%  {margin-left:-1800px;} 
80%  {margin-left:-1900px;} 
84%  {margin-left:-2000px;} 
88%  {margin-left:-2100px;} 
92%  {margin-left:-2200px;} 
96%  {margin-left:-2300px;} 
100%  {margin-left:-2400px;} 
}

@-o-keyframes slide{
0%   {margin-left:0px;}
4%   {margin-left:0px;}
8%  {margin-left:-100px;}
12%  {margin-left:-200px;}
16%  {margin-left:-300px;}
20%  {margin-left:-400px;} 
24%  {margin-left:-500px;}
28%  {margin-left:-600px;}  
32%  {margin-left:-700px;}
36%  {margin-left:-800px;}  
40%  {margin-left:-900px;} 
44%  {margin-left:-1000px;} 
48%  {margin-left:-1100px;} 
52%  {margin-left:-1200px;} 
56%  {margin-left:-1300px;} 
60%  {margin-left:-1400px;} 
64%  {margin-left:-1500px;} 
68%  {margin-left:-1600px;} 
72%  {margin-left:-1700px;} 
76%  {margin-left:-1800px;} 
80%  {margin-left:-1900px;} 
84%  {margin-left:-2000px;} 
88%  {margin-left:-2100px;} 
92%  {margin-left:-2200px;} 
96%  {margin-left:-2300px;} 
100%  {margin-left:-2400px;} 
}

