.marquee {
    height: 100px;
    width: 100%;
    white-space: nowrap;
    position: relative;

}

.marquee h2 {
    position: absolute;
    height: 100%;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 300%;
    color: #00BCD4;
    letter-spacing: 0.1em;
    margin: 0.65em 0 0;
    left: -150%;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    /* Apply animation to this element */
    -moz-animation: example1 20s linear infinite;
    -webkit-animation: example1 20s linear infinite;
    animation: example1 20s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes example1 {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
    0%   {
        -moz-transform: translateX(100%); /* Firefox bug fix */
        -webkit-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%); /* Firefox bug fix */
        -webkit-transform: translateX(-100%); /* Firefox bug fix */
        transform: translateX(-100%);
    }
}