/**********************************************************************************
    File name:      Products/Index.css
    Description:    Styles describing presentational overrides for products landing
                    page.
    Index:
        1. $products
            a) $carousel
            b) $summary-ctr
            c) $summary-img
            d) $summary-description
            e) $summary news-home
            f) $summary social-home

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

**********************************************************************************/

/* all  sizes */
@media screen {
    /**********************************************************************************/
    /* sub classes
    /**********************************************************************************/

    /* $summary */
    .products .summary.feature {}
    .products .summary.feature h2 {color:#FF4800;}
    .products .summary.feature h3 {color:#FF4800;}
    .products .summary.recipe {}
    .products .summary.recipe h2 {color:#0099CC;}
    .products .summary.recipe h3 {color:#0099CC;}
}

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

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

    /* $carousel */
    .products .carousel {
        width:100% !important;
        margin-bottom:40px;
        -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); 
    }
    .products .carousel .carousel-control {
        z-index:90; opacity:0.8;
        height:100%;
        background:none;
    }
    .products .carousel .carousel-control .glyphicon {
        margin-top:-20px;
        color: yellow; font-size:40px;
    }
    .products .carousel .carousel-indicators {bottom:0.5%;}
    .products .carousel .carousel-indicators li {
        width:12px; height:12px; margin:0 3px;
        background-color:#FFF;
    }
    .products .carousel .carousel-indicators li.active {background-color:#FFC422;}

    .products .carousel-inner > .item {
        height:auto; min-height:120px;
    }
    .products .carousel-inner > .item figure {
        display:block; position:relative; overflow:hidden;
        width:auto;
        padding:4px;
        background:#FFF;
    }
    .products .carousel .item img {
        width:100%; height:auto; min-height:120px; 
    }
    .products .carousel-caption {
        position:static;
        padding:0; margin:0;
    }
    .products .carousel-caption h1 {
        color:#000; font-size:24px; font-weight:500;
        text-shadow:none; text-transform:capitalize;
        line-height:24px;
    }
    .products .carousel-caption p {
        color:#000; font-family:'Lato',sans-serif; font-size:16px; font-weight:500;
        text-shadow:none; text-transform:none;
        line-height:20px;
    }
    .products .carousel-caption p .read-more {}

    /* $summary */
    .products .summary {
        padding:0 15px; margin-bottom:40px;
        text-align:center;
    }
    .products .summary h2 {
        margin:0 0 10px 0;
        color:#333;
        font-family:'Lato', sans-serif; font-size:24px; font-weight:700;
    }
    .products .summary h3 {
        margin:0 0 10px 0;
        color:#333;
        font-family:'Lato', sans-serif; font-size:20px; font-weight:700;
    }
    .products .summary h4 {
        margin:0 0 10px 0;
        color:#333;
        font-family:'Lato', sans-serif; font-size:18px; font-weight:700;
    }
    .products .summary p {
        margin:0 0 20px 0;
        font-family:'Lato', sans-serif; font-size:16px; font-weight:500;
    }
    .products .summary .summary-img {margin-bottom:20px;}
    .products .summary .summary-img a {
        display:inline-block;
        width:auto; height:auto;
        padding:0; margin:0;
        -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);
    }
    .products .summary .summary-img img {
        max-width:100%;
        padding:0; margin:0;
        background:none transparent;
        border:none;
        outline:none;
    }
    .products .summary .summary-description {margin-bottom:20px;}
}

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

    /* row */
    .container {
        width:auto; max-width:960px;
        padding:0; margin:0 auto;
    }
    .container > .row {
        padding:0; margin:0; margin-bottom:40px;
    }

    /* $carousel */
    .products .carousel {
        /*margin-bottom:40px;*/
        -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); 
    }
    .products .carousel .item figure {
        padding:4px;
        background:#FFF;
    }
    .products .carousel .item img {width:100%;}
    .products .carousel .carousel-control {
        display:none; opacity:0.8; z-index:90;
        height:100%;
        background:none;
    }
    .products .carousel .carousel-indicators {
        left:auto; top:10px; right:10px; bottom:auto;
        width:auto; min-width:60px; max-width:120px;
        background-color: #000;
        -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; 
    }
    .products .carousel .carousel-indicators li {background-color:#FFF;}
    .products .carousel .carousel-indicators li.active {background-color:#FFC422;}

    /* summary */
    .products .summary {padding:0 15px;}
    .products .summary h2 {
        margin:0 0 10px 0;
        color:#333;
        font-family:'Lato', sans-serif; font-size:24px; font-weight:700;
    }
    .products .summary h3 {
        margin:0 0 10px 0;
        color:#333;
        font-family:'Lato', sans-serif; font-size:20px; font-weight:700;
    }
    .products .summary h4 {
        margin:0 0 10px 0;
        color:#333;
        font-family:'Lato', sans-serif; font-size:18px; font-weight:700;
    }
    .products .summary p {
        margin:0 0 24px 0;
        font-family:'Lato', sans-serif; font-size:16px; font-weight:500;
    }
    .products .summary .summary-img {margin-bottom:20px;}
    .products .summary .summary-img a {
        display:inline-block;
        width:auto; height:auto;
        padding:0; margin:0;
        -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);
    }
    .products .summary .summary-img img {
        padding:0; margin:0;
        background:none transparent;
        border:none;
        outline:none;
    }
    .products .summary .summary-description {}

    .summary.feature {}
    .summary.feature h2 {color:#FF4800;}
    .summary.feature h3 {color:#FF4800;}

    .summary.recipe {}
    .summary.recipe h2 {color:#0099CC;}
    .summary.recipe h3 {color:#0099CC;}
}