.news {
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
    background-color:#000;
    width: 100%;
    height: 35px;
    /*margin: 2px auto;*/
    overflow: hidden;
    /*border-radius: 4px;*/
    /*padding: 3px;*/
    -webkit-user-select: none
}
.newsmainpage {
    float: right;
    margin: 10px;
    width: 265px;
    direction: rtl;
    text-align: right;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
    padding: 0;
}
    
.full-width {
    width: 100%;
}

.news span {
    float: right;
    background-color: orangered;
    color: #fff;
    padding: 5px;
    position: relative;
    top: 1%;
    border-radius: 4px;
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
    font: 16px ;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    cursor: pointer
}

.news ul {
    float: right;
    padding-right: 1%;
    animation: ticker 20s cubic-bezier(1, 0, .5, 0) infinite;
    -webkit-user-select: none
}

    .news ul li {
        line-height: 30px;
        list-style: none
    }

        .news ul li a {
            color: white;
            text-decoration: none;
            font: 20px "Tajawal", sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-user-select: none
        }

    .news ul:hover {
        animation-play-state: paused
    }
.magenta {
    background: #b63ace
}

    .magenta span {
        background: #842696
    }
    .news span:hover + ul {
        animation-play-state: paused
    }
@keyframes ticker {
    0% {
        margin-top: 0
    }

    25% {
        margin-top: -30px
    }

    50% {
        margin-top: -60px
    }

    75% {
        margin-top: -90px
    }

    100% {
        margin-top: 0
    }
}