﻿.breaking-news{
    width:100%;
    height:50px;
    background-color:black;  
}

.breaking-hidden{
    display:none;
    visibility:hidden;
}

.breaking-news .left{
    width:240px;
    background-color:#fef200;
    float:left;
    height:50px;
    text-align:center;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Roboto Condensed', Tahoma;
    white-space:nowrap;
}

.breaking-news .left .title {
    padding-top:8px;
    text-shadow: 0 1px 2px gray;
    transform : scale(1,1.5);
    -webkit-transform:scale(1,1.5);
    -moz-transform:scale(1,1.5); 
    -ms-transform:scale(1,1.5); 
    -o-transform:scale(1,1.5);
}

.breaking-news .right{    
    width:100%;
    background-color:black;
    height:50px;
    color:white; 
    font-weight:600;   
}

.breaking-news div.marquee
{
    width: auto;
    height: 30px;
    position: absolute;
    -moz-animation: marquee 20s  linear infinite; 
    -o-animation: marquee 20s  linear infinite; 
    -webkit-animation: marquee 20s  linear infinite; 
    animation: marquee 20s  linear infinite;
    color: #FFF;
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

    .breaking-news div.marquee:hover
    {
        -moz-animation-play-state: paused ;
        -o-animation-play-state: paused ;
        -webkit-animation-play-state: paused;
         animation-play-state: paused;
    }
@-moz-keyframes marquee
{
    0%{
        -moz-transform:  translate(920px);
        -ms-transform:  translate(920px);
        -o-transform:  translate(920px);
        -webkit-transform:  translate(920px);
        transform:  translate(920px);

    }
    100%
    {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-ms-keyframes marquee {
     0%{
        -moz-transform:  translate(920px);
        -ms-transform:  translate(920px);
        -o-transform:  translate(920px);
        -webkit-transform:  translate(920px);
        transform:  translate(920px);

    }

100% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes marquee {

        0%{
        -moz-transform:  translate(920px);  
        -ms-transform:  translate(920px);
        -o-transform:  translate(920px);
        -webkit-transform:  translate(920px);
        transform:  translate(920px);

    }
100% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@keyframes marquee {
      0%{
        -moz-transform: translate(920px); 
        -ms-transform: translate(920px);
        -o-transform: translate(920px);
        -webkit-transform: translate(920px);
        transform: translate(920px);

    }
100% { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}




.breaking-news .right a{
    text-decoration:none;
    color:inherit;    
    margin-left: 100px;
}

.breaking-news .right .headline-breaking{
   padding-left:20px;
   padding-top:15px;  
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    position: relative;
    height: 20px;
    line-height: 20px;
    overflow: hidden;

}

@media (min-width: 768px) and (max-width: 1023px) {


}

@media (max-width: 767px) {

    .breaking-news{
        width:100%;
        margin-top:20px;
        height: auto;
        overflow:hidden;
    }
    .breaking-news .right .headline-breaking{
        white-space:pre-wrap;
        overflow:hidden;
        padding: 0;
      

        height: auto;
        line-height: 20px;
        margin: 0;
        overflow: hidden;
        

    }

        .breaking-news div.marquee
        {
            -moz-animation-play-state: paused;
            -o-animation-play-state: paused;
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
            padding: 0;
            -moz-animation-iteration-count: 0;
            -o-animation-iteration-count: 0;
            -webkit-animation-iteration-count: 0;
            animation-iteration-count: 0;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            -webkit-transform: none;
            transform: none;
            position: static;
            height: inherit;
            padding-top: 8px;
            padding-left: 8px;
            padding-right: 8px;
        }
 

    .breaking-news .left .title {
        padding-top:14px;
    }

    .breaking-news .left {
        font-size: 18px;
        float:none;
        width:100%;
    }

    .breaking-news .right {        
        float:none;
        width:100%;     
        height:auto;
        padding-bottom:15px;   
    }

    .breaking-news .right .headline {        
        white-space:normal;
        overflow:auto;
    }

}
