﻿.headline-static {
}

    .headline-static .grd:active {
        background: rgba(255,255,255,0.5);
    }

    .headline-static .grd:hover {
        
    }

    .headline-static .news a, .headline-static .news a:visited, .headline-static .news a:hover {
        color: #fff;
    }





    .headline-static .col1 {
        width: 35%;
        float: left;
    }

    .headline-static .col2 {
        width: 40%;
        float: left;
    }

    .headline-static .col3 {
        width: 25%;
        float: left;
    }

    .headline-static .news {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding: 3px;
        /*border: 1px solid red;*/
        position: relative;
    }

        .headline-static .news .img {
            background: #555;
            height: 100%;
        }


        .headline-static .news .info {
            position: absolute;
            bottom: 0px;
            padding: 10px;
            width: 100%;
        }

        .headline-static .news .title {
            text-transform: uppercase;
            font-size: 0.8em;
            color: #ddd;
            line-height: normal;
            margin-bottom: 5px;
        }

        .headline-static .news .description {
            line-height: normal;
            font-size: 0.9em;
            color: #fff;
        }

    .headline-static .news1 {
        float: left;
        width: 100%;
        height: 196px;
    }

        .headline-static .news1 .img1 {
            background-size: 100%;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }


    .headline-static .news2 {
        float: left;
        width: 100%;
        height: 196px;
    }

        .headline-static .news2 .img2 {
            background-size: 100%;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

    .headline-static .news3 {
        width: 100%;
        height: 392px;
    }

        .headline-static .news3 .img3 {
            background-size: 100%;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

    .headline-static .news4 {
        float: left;
        width: 100%;
        height: 196px;
    }

        .headline-static .news4 .img4 {
            background-size: 100%;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }


    .headline-static .news5 {
        float: left;
        width: 100%;
        height: 196px;
    }

        .headline-static .news5 .img5 {
            background-size: 100%;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }



    .headline-static .grd {
        height: 100%;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        color: rgba(255,255,255,1);
        background: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 30%, rgba(0,0,0,1) 100%);
        background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(0,0,0,1) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(0,0,0,1) 100%);
        background-position: 50% 50%;
        -webkit-background-origin: padding-box;
        background-origin: padding-box;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-background-size: auto auto;
        background-size: auto auto;
        filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00000000, endColorStr=0);
        /*-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF)*/;
        */;
    }


    .headline-static .viewall {
        font-size: 0.9em;
        font-weight: bold;
        margin-right: 5px;
    }





@media only screen and (max-width : 320px) { /*--- Mobile portrait ---*/
    .headline-static .col1 {
        width: 100%;
    }

    .headline-static .col2 {
        display: none;
    }

    .headline-static .col3 {
        display: none;
    }

    .headline-static .news .title {
        font-size: 0.8em;
    }

    .headline-static .news .description {
        font-size: 1.0em;
    }
}

@media only screen and (min-width : 320px) and (max-width : 480px) { /*--- Mobile portrait ---*/
    .headline-static .col1 {
        width: 100%;
    }

    .headline-static .col2 {
        display: none;
    }

    .headline-static .col3 {
        display: none;
    }

    .headline-static .news .title {
        font-size: 0.8em;
    }

    .headline-static .news .description {
        font-size: 1.0em;
    }
}

@media only screen and (min-width : 480px) and (max-width : 595px) { /*--- Mobile landscape ---*/
    .headline-static .col1 {
        width: 100%;
    }

    .headline-static .col2 {
        display: none;
    }

    .headline-static .col3 {
        display: none;
    }

    .headline-static .news .title {
        font-size: 0.8em;
    }

    .headline-static .news .description {
        font-size: 1.0em;
    }
}

@media only screen and (min-width : 595px) and (max-width : 690px) { /*--- Small tablet portrait ---*/
    .headline-static .col1 {
        width: 100%;
    }

    .headline-static .col2 {
        display: none;
    }

    .headline-static .col3 {
        display: none;
    }


    .headline-static .news .title {
        font-size: 0.8em;
    }

    .headline-static .news .description {
        font-size: 1.0em;
    }
}

@media only screen and (min-width : 690px) and (max-width : 800px) { /*--- Tablet portrait ---*/

    .headline-static .col1 {
        width: 50%;
    }

    .headline-static .col2 {
        width: 50%;
    }

    .headline-static .col3 {
        display: none;
    }


    .headline-static .news .title {
        font-size: 0.8em;
    }

    .headline-static .news .description {
        font-size: 1.0em;
    }
}

@media only screen and (min-width : 800px) and (max-width : 1024px) { /*--- Small tablet landscape ---*/
}

@media only screen and (min-width : 1024px) and (max-width : 1224px) { /*--- Tablet landscape --- */
}
