/* Make it a marquee */
.marquee {
    width: 700px;
    margin: 0 auto;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
/* seconds based on length of string */
    animation: marquee 40s linear infinite;
}

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

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 55em; }
/* based on length of string */
    100% { text-indent: -65em }
}

/* Make it pretty */
.microsoft {
    padding-left: 1.5em;
    position: relative;
    font: 1em Helvetica, Sans-Serif;
}

/* fade zones before and after */
.microsoft:before, .microsoft::before {
    left: 0;
    z-index: 1;
    content: '';
    position: absolute;
    top: 0em; left: -1em;
    width: 3em; height: 2em;
    background-image: linear-gradient(90deg, white 20%, rgba(255,255,255,0));
}
.microsoft:after, .microsoft::after {
    left: 0;
    z-index: 2;
    content: '';
    position: absolute;
    top: 0em; left: 665px;
    width: 3em; height: 2em;
    background-image: linear-gradient(270deg, white 20%, rgba(255,255,255,0));
}