.marquee {
    display: block;
    width: 100%;
    height: auto;
    min-height: 40px;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    z-index: 9998;
    font-size: 1.4em;
    /*border: 0 solid #000;*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /*
    -webkit-box-shadow: inset 0 2px 2px  rgba(0, 0, 0, .5), 0 1px 0  rgba(250, 250, 250, .2);
    box-shadow: inset 0 2px 2px  rgba(0, 0, 0, .5), 0 1px 0  rgba(250, 250, 250, .2);
    */
    -webkit-transition: background-color 350ms;
    -moz-transition: background-color 350ms;
    -o-transition: background-color 350ms;
    transition: background-color 350ms;    
}

    .marquee li {
        position: absolute;
        font-family: Tahoma, Arial, sans-serif;
        width: 0;
        height: 100%;
        margin: 0 5px;
        line-height: 25px;
        text-align: left;
        /*text-shadow: 1px 1px 0 #ff0000;
        filter: dropshadow(color=#ff0000, offx=1, offy=1);*/
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
        list-style:none;
        padding:0;
    }
@media (min-width:333px) and (max-width:645px) {
    .marquee {min-height: 65px;}
    .marquee li {font-size:85%;text-shadow: none; filter: none;}
}
@media (max-width: 332px) {
    .marquee {min-height: 65px;}
    .marquee li {font-size:80%;height: 100%;margin:0 auto;text-shadow: none; filter: none;line-height: 21px;}
}
.marquee li.active {
    -moz-animation: left-one 9s ease normal;
    -o-animation: left-one 9s ease normal;
    -webkit-animation: left-one 9s ease normal;
    animation: left-one 9s ease normal;
    width: 100%;
    animation-iteration-count: infinite;
}
.marquee.down li.active {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -moz-animation: down-one 12s ease normal;
    -o-animation: down-one 12s ease normal;
    -webkit-animation: down-one 12s ease normal;
    animation: down-one 12s ease normal;
    width:100%;
}

.marquee.up li.active {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -moz-animation: up-one 12s ease normal;
    -o-animation: up-one 12s ease normal;
    -webkit-animation: up-one 12s ease normal;
    animation: up-one 12s ease normal;
    width:100%;
}
/*================================
	Move the Marquee to the Left
==================================*/
/* css standard keyframes*/
@keyframes left-one {
    0% {
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    65% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1.0;
    }
    90% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1.0;
    }
    95% {
        -moz-transform: translateX(-30%);
        -ms-transform: translateX(-30%); 
        -o-transform: translateX(-30%);
        -webkit-transform: translateX(-30%); 
        transform: translateX(-30%);
        opacity: 0.5;
    }
    100% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0.0;
    }
}


@keyframes down-one {
    0%  {
        transform:translateY(-100%);
        opacity:0.0;
    }
    10% {
        transform:translateY(0);
        opacity:1.0;
    }
    40% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(100%);
        opacity:0.0;
    }
    100%{
        transform:translateY(100%);
        opacity:0.0;
    }
}

@keyframes up-one {
	0% {
		transform:translateY(100%);
	}
	10% {
		transform:translateY(0);
	}
	40% {
		transform:translateY(0);
	}
	50% {
		transform:translateY(-100%);
	}
	100%{
		transform:translateY(-100%);
	}
}

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

    }
    65% {
        -moz-transform: translateX(0);

        opacity: 1.0;
    }
    90% {
        -moz-transform: translateX(0);

        opacity: 1.0;
    }
    95% {
        -moz-transform: translateX(-30%);

        opacity: 0.5;
    }
    100% {
        -moz-transform: translateX(-100%);
        opacity: 0.0;
    }
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
    0% {
        -webkit-transform: translateX(100%);

    }
    65% {
        -webkit-transform: translateX(0);
        opacity: 1.0;
    }
    90% {
        -webkit-transform: translateX(0);
        opacity: 1.0;
    }
    95% {
        -webkit-transform: translateX(-30%);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-100%);
        opacity: 0.0;
    }
}


/*================================
	Move the Marquee Downwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
	0%	{
		-moz-transform:translateY(-100%);
	}
	10% {
		-moz-transform:translateY(0);
	}
	40% {
		-moz-transform:translateY(0);
	}
	50% {
		-moz-transform:translateY(100%);
	}
	100%{
		-moz-transform:translateY(100%);
	}
}


/** Webkit Keyframes **/
@-webkit-keyframes down-one {
	0% {
		-webkit-transform:translateY(-100%);
	}
	10% {
		-webkit-transform:translateY(0);
	}
	40% {
		-webkit-transform:translateY(0);
	}
	50% {
		-webkit-transform:translateY(100%);
	}
	100%{
		-webkit-transform:translateY(100%);
	}
}


/*================================
	Move the Marquee Upwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
	0%	{
		-moz-transform:translateY(100%);
	}
	10% {
		-moz-transform:translateY(0);
	}
	40% {
		-moz-transform:translateY(0);
	}
	50% {
		-moz-transform:translateY(-100%);
	}
	100%{
		-moz-transform:translateY(-100%);
	}
}


/** Webkit Keyframes **/
@-webkit-keyframes up-one {
	0% {
		-webkit-transform:translateY(100%);
	}
	10% {
		-webkit-transform:translateY(0);
	}
	40% {
		-webkit-transform:translateY(0);
	}
	50% {
		-webkit-transform:translateY(-100%);
	}
	100%{
		-webkit-transform:translateY(-100%);
	}
}

/* opera Keyframes*/
@-o-keyframes left-one {
    0% {
        -o-transform: translateX(100%);
    }
    25% {
        -o-transform: translateX(0);
        opacity: 1.0;
    }
    75% {
        -o-transform: translateX(0);
        opacity: 1.0;
    }
    85% {
        -o-transform: translateX(-100%);
        opacity: 0.0;
    }
    100% {
        -o-transform: translateX(-100%);
        opacity: 0.0;
    }
}

@-o-keyframes down-one {
    0%  {
        -o-transform:translateY(-100%);
    }
    10% {
        -o-transform:translateY(0);
    }
    40% {
        -o-transform:translateY(0);
    }
    50% {
        -o-transform:translateY(100%);
    }
    100%{
        -o-transform:translateY(100%);
    }
}

@-o-keyframes up-one {
	0% {
		-o-transform:translateY(100%);
	}
	10% {
		-o-transform:translateY(0);
	}
	40% {
		-o-transform:translateY(0);
	}
	50% {
		-o-transform:translateY(-100%);
	}
	100%{
		-o-transform:translateY(-100%);
	}
}