/*When a Bulletin is active it will scroll across the bottom from left to right of both the Login screen, 
the Customer page (if user has access to multiple Customers) 
 the myService Dashboard of a Customer.
2) If multiple Bulletins are active they will display and ordered by Start Date and separated by a "|".*/

.textscroll {
    bottom: 60px !important;
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: fixed;
    white-space: nowrap;
}

    .textscroll h3 {
        font-size: 1.6em;
        color: white;
        width: 100%;
        height: 100%;
        margin: 0;
        line-height: 50px;
        text-align: center;
        Starting position
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        Apply animation to this element 
        -moz-animation: textscroll 25s linear infinite;
        -webkit-animation: textscroll 25s linear infinite;
        animation: textscroll 25s linear infinite;
    }
/* Move it (define the animation) */

@-moz-keyframes textscroll {
    0% {
        -moz-transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes textscroll {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes textscroll {
    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%);
    }
}

/*small anything less than 768  */
@media only screen and (min-width: 768px) {
    .textscroll h3 {
        font-size: 1.8em !important;
    }
}

/*medium anything less than 992  */
@media only screen and (min-width: 992px) {
    .textscroll h3 {
        font-size: 2.0em !important;
    }
}

/*medium anything less than 1200 */
@media only screen and (min-width: 1200px) {
    .textscroll h3 {
        font-size: 2.2em !important;
    }
}

@media only screen and (min-width: 1400px) {
    .textscroll h3 {
        font-size: 2.4em !important;
    }
}

@media(max-width: 500px) {
    .left {
        display: none;
    }

    .right {
        background-image: url('../images/login_bg.jpg') !important;
        background-position: right;
    }

    .split {
        width: 100% !important;
    }

    .centered {
        top: 45% !important;
    }

    #loginspan {
        margin-left: 0.01px !important;
        font-size: 11.7px !important;
        text-align: left !important;
    }
}