/**********************************************************************************
    File name:      Recipes/Index.css
    Description:    Styles describing presentational overrides for recipes 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 */
    .section-lead {
        padding-top:0;
    }

    /* $recipe-finder */
    .recipe-finder {
        background-color:#FCFCFC;
    }
    .recipe-finder + div {
        padding:20px 30px;
        background-color:#FCFCFC;
        border:1px solid #CCC;  
        border-top:none; border-bottom:none;
        font-family:Lato, sans-serif;
    }
    .recipe-finder + div h1 {
        padding:0; margin:0; margin-bottom:10px;
        color:#333; /*font-family:Lato, sans-serif;*/ font-size:24px; font-weight:600;
    }
    .recipe-finder + div p {
        padding:0; margin:0; /*margin-bottom:10px;*/ font-weight:500;
        color:#333;
    }
    .recipe-finder + div p span {
        display:inline;
        padding:0 0 0 5px; margin:0; font-weight:700;
        color:inherit;
    }

    /* $results-gallery */
    .results-gallery {
        background:rgba(051,051,051,0.03);
        border:1px solid #CCC;
    }
    .results-gallery > .row {padding:0 15px;}
    .results-gallery > .row > div:first-child h1 {
        padding:0; margin:0; margin-bottom:10px;
        color:#333; font-family:Lato, sans-serif; font-size:24px; font-weight:600;
    }
    .results-gallery > .row > div:first-child p {
        padding:0; margin:0; margin-bottom:10px;
        color:#333;
    }
    .results-gallery hr {
        height:1px;
        background:none;
        border:none; border-top:1px solid #CCC;
    }

    .recipes .results-gallery article figure {
        max-width:200px; 
        margin:0 auto 20px;
    }
    .recipes .results-gallery article figure a {
        display:block;
        padding:2px; margin:0 auto;
        background:#FFF;
    }
    .recipes .results-gallery article figure img {
        display:block; 
        width:100%; /*max-width:200px;*/
    }

    .recipes .results-gallery li figure:hover {
        padding:2px;
        background-color:#FFF;
    }
    .recipes .results-gallery li figure:hover a {
        padding:0;
        background-color:#000;
    }
    .recipes .results-gallery li figure a:hover img {opacity:0.6;}

    /* $banner */
    .recipes .banner {position:relative;}
    .recipes .banner figure {}
    .recipes .banner .banner-caption {
        position:absolute; left:4px; bottom:4px;
        width:660px; height:auto; min-height:162px; max-height:240px;
        padding:0 0 20px 0; margin:0;
        background:rgba(0,0,0, 0.5);
    }
    .recipes .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; 
    }
    .recipes .banner .banner-caption h3 {
        margin:20px 15px 0px 66px;
        color:#FFF; color: #FFF; font-family:'Lato', sans-serif; font-weight:700; font-size:20px;
        text-align:left;
    }
    .recipes .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;
    }
    .recipes .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;
    }
    .recipes .banner .banner-caption .read-more a { 
        position: relative; 
        padding: 3px 25px;  
        border: 1px solid #ffffff;  
        -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: #4c4a48 0px 4px 3px -2px; 
        background: #FFC422;
        -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;
    }

}

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

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

    /* $banner */
    .recipes .banner {
        margin-bottom:40px;
        -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;
    }
    .recipes .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);
    }
    .recipes .banner .banner-caption  {
        position:static;
        width:auto; max-height:none;
        padding:0; margin:0; margin-bottom:10px;
        background:none;
    }
    .recipes .banner .banner-caption h1 {
        width:auto;
        padding:0; margin:0; margin-bottom:20px;
        color:#000; font-size:24px;
        text-align:center; 
        line-height:24px;
    }
    .recipes .banner .banner-caption h3 {
        width:auto;
        padding:0; margin:0; margin-bottom:10px;
        color:#333;
        text-align:center; 
    }
    .recipes .banner .banner-caption p {
        width:auto;
        padding:0; margin:0; margin-bottom:20px;
        color:#000; font-size:16px;
        text-align:center; 
        line-height:20px;
    }
    .recipes .banner .banner-caption .read-more {
        display:block;
        width:auto;
        padding:0; margin:0 0 20px;
    }
    .recipes .banner .banner-caption .read-more a {
        display:block;
        width:auto;
        padding:4px; margin:0 auto 20px;
        font-size:16px;
    }

}

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

    /* container */
    #breadcrumb + div {
        width:auto; max-width:960px;
        padding:0 15px; margin:0 auto;
    }
    .product.container {
        width:auto;
        padding:0; margin:0;
    }
    .container > .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;}

}