/**********************************************************************************
    File name:      News/Index.css
    Description:    Styles describing presentational overrides for news' landing
                    view.
    Index:
        1. all sizes 
            a) sub classes (empty)
        2. x-small 
            a) $products-category
        3. sm, md, lg
            a) $carousel
            b) $summary-ctr

    Color Palette: please see file 'base.css'.
    
**********************************************************************************/

/* all sizes */
@media screen {

    /**********************************************************************************/
    /* sub classes
    /**********************************************************************************/

    /* $section-lead */
    .news .section-lead {padding-top:0;}

    /* $banner */
    .news .banner {position:relative;}
    .news .banner figure {}
    .news .banner .banner-caption {
        position:absolute;
        left:4px; bottom:4px;
        width:660px; height:auto; min-height:162px; max-height:240px;
        padding:32px 0 20px 0; margin:0;
        background:rgba(0,0,0, 0.5);
    }
    .news .banner .banner-caption h1 {
        margin:0px 15px 5px 66px;
        color:#FFF; font-family:'Oswald',sans-serif; font-size:40px; font-weight:500;
        text-align:left; text-transform:capitalize; text-shadow:none; 
        line-height:60px;
    }
    .news .banner .banner-caption h3 {
        margin:20px 15px 0px 66px;
        color:#FFF; font-family:'Lato', sans-serif; font-weight:700; font-size:20px;
        text-align: left;
    }
    .news .banner .banner-caption p {
        margin:0px 15px 10px 66px;
        color:#FFF; font-family:'Lato',sans-serif; font-size:14px; font-weight:500;
        text-align:left; text-transform:none; text-shadow:none;
        line-height:20px;
    }
    .news .banner .banner-caption .read-more {
        display: table-cell;
        width:initial; height:50px;
        padding:0 0 0 66px; margin-top:0; margin-bottom:0;
        text-align: center; vertical-align: middle;
    }
    .news .banner .banner-caption .read-more a {
        position: relative;
        padding: 3px 25px;
        background: #FFC422;
        border: 1px solid #FFF;
        -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
        -moz-box-shadow:#4C4A48 0px 4px 3px -2px; -webkit-box-shadow:#4C4A48 0px 4px 3px -2px; box-shadow:#4C4A48 0px 4px 3px -2px;
        color:#FFF; font-family:'Lato', sans-serif; font-size:14px; font-weight:600;
    }

    /* $section-contents */
    .news .section-contents {
        padding:15px 0; /*margin:0 75px 40px;*/
        border-top:3px solid #33CFEB;
    }
    .news .section-contents h3 {
        color:#333; font-size:24px;
    }
    .news .section-contents a {color:#FF4800;}
    .news .section-contents p {margin-bottom:20px;}
    .news .section-contents p * {margin-bottom:0;}
    .news .section-contents .read-more a {color:#FFF;}

    /* $related-items */
    .news .related-items {}
    .news .related-items ul:after {
        display: table;
        clear: both;
        content: " ";
    }
    .news .related-items li {
        float: left;
        width: 50%;
        margin-bottom: 20px;
    }
    .news .related-items article {
        margin-bottom: 0;
    }
    .news .related-items article h4 {text-transform:capitalize;}
    .news .related-items article figure img {
        display:block;
        padding:2px;  margin:0 auto;
        background:#FFF;
    }
    .news .related-items article figure + div {
        text-align: left;
    }
    .news .related-items article figure + div > a {
        display:block;
        width:auto;
        margin-bottom:10px;
    }
}

/* x-small */
@media screen and (max-width: 767px) {

    /* $products-category */
    .news {padding:0 8.75%; margin:0;}
    .news > .row {/*padding:0; margin:0;*/}
    .news .row > div {/*padding:0; margin:0;*/}

    /* $banner */
    .news .banner {
        margin-bottom:40px;
        -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;
    }
    .news .banner figure {
        display:block; position:relative; overflow:hidden;
        width:auto;
        margin:0; margin-bottom:10px;
        -moz-box-shadow: 0px 4px 10px 0px rgba(051,051,051,0.3); -webkit-box-shadow: 0px 4px 10px 0px rgba(051,051,051,0.3); box-shadow: 0px 4px 10px 0px rgba(051,051,051,0.3);
    }
    .news .banner .banner-caption  {
        position:static;
        width:auto; max-height:none;
        padding:0; margin:0; margin-bottom:10px;
        background:none;
    }
    .news .banner .banner-caption h1 {
        width:auto;
        padding:0; margin:0; margin-bottom:20px;
        color:#000; font-size:24px;
        text-align:center; 
        line-height:24px;
    }
    .news .banner .banner-caption h3 {
        width:auto;
        padding:0; margin:0; margin-bottom:10px;
        color:#333;
        text-align:center; 
    }
    .news .banner .banner-caption p {
        width:auto;
        padding:0; margin:0; margin-bottom:20px;
        color:#000; font-size:16px;
        text-align:center; 
        line-height:20px;
    }
    .news .banner .banner-caption .read-more {
        display:block;
        width:auto;
        padding:0; margin:0 0 20px;
    }
    .news .banner .banner-caption .read-more a {
        display:block;
        width:auto;
        padding:4px; margin:0 auto 20px;
        font-size:16px;
    }

    /* $section-contents */
    .news .section-contents {
        padding:30px 0;
        margin: 0 0 20px;
    }
    .news .section-contents > .row > div {padding:0;}

    /* $related-items */
    .news .related-items li {
        display:block;
        float:none; clear:both;
        width:auto;
        margin-bottom:40px;
    }
    .news .related-items article figure a {width:100%;}
    .news .related-items article figure img {width:100%;}
    
}

/* sm, md, lg */
@media (min-width: 768px) {

    /* container */
    #breadcrumb + div {
        width:auto; max-width:960px;
        padding:0 15px; margin:0 auto;
    }
    .news.container {
        width:auto;
        padding:0; margin:0;
    }
    .news > .row {
        padding:0; margin:0; margin-bottom:40px;
        /*background-color:#F7F7F7;
        border:1px solid #E2E2E2; border-top:3px solid #FF6900;*/
    }
    .container > .row > div:first-child {padding:0;}
    .container > .row > div:first-child + div {background-color:#FFF;}

    
}