/* ************************************* */
/*                                       */
/* Ticker                                */
/*                                       */
/* ************************************* */

@keyframes ticker {
  0%   { transform: translate(-50%, -100%);visibility:visible; }
  100% { transform: translate(-50%, 0);visibility:visible; }
 }

.ticker {
  width:100%;
  height:200px;
  background: white;
  overflow:hidden;
  padding:24px;
  position:relative;
  -webkit-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.ticker:before,
.ticker:after {
  left:0;
  content:"";
  position: absolute;
  width:100%;
  height:48px;
  z-index: 10;
}

.ticker:after {
  bottom:0;
  background: -webkit-linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,0));
  background: -o-linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,0));
  background: -moz-linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,0));
  background: linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,0));
  -webkit-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
}

.ticker:before {
  top:0;
  background: -webkit-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));
  background: -o-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));
  background: -moz-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));
  background: linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));
  -webkit-border-radius:6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.ticker ul{
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  position:absolute;
  top:0;
  left:50%;
  width:90%;
  animation: ticker 500s linear 2s infinite;
  -webkit-user-select: none;
  visibility: hidden;
}

.ticker li{
  padding-bottom: 24px;
  text-align: center;
}

.ticker:hover { animation-play-state: paused }