/**********************************************************************************
    File name:      Contact/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;
    }

    /* $section-contents */
    .section-contents {
        padding:30px; margin:0; margin-bottom:40px;
        background-color:#FFF;
        border:1px solid #E2E2E2; border-top:3px solid #FF6900;
    }
    .section-contents h3 {color:#333; font-size:24px;}
    .section-contents a {color:#FF4800;}
    .section-contents p {margin-bottom:2px;}
    .section-contents p * {margin-bottom:0;}
    .section-contents .contact-info {
        margin-bottom:40px;
        font-family: Lato, sans-serif; font-size: 13px;
    }
    .section-contents .description {margin-bottom:40px;}
    .section-contents .address label {color:#C00000;}
    .section-contents .phone label {color:#C00000;}
    .section-contents .phone p {font-weight:bold;}
    .section-contents .email {padding-top:20px;}

    .section-contents .form-group {margin-bottom:15px;}
    .section-contents .control-label {
        position:static; float:left;
        width:auto; height:auto;
    }
    .section-contents .read-more {text-align:center;}
    .section-contents .read-more .btn {
        position:relative; 
        padding:3px 25px; 
        border:1px solid #FFF;
        background:#B0D000;
        -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; 
        -moz-box-shadow:0px 4px 3px -2px rgba(051,051,051,0.5);
        -webkit-box-shadow:0px 4px 3px -2px rgba(051,051,051,0.5);
        box-shadow:0px 4px 3px -2px rgba(051,051,051,0.5);
        color:#FFF; font-size:12px; font-family:'Lato',sans-serif; font-weight:600;
        /*background:#FFC422; 
        */  
    }
    

    /* $banner */
    .contact .banner {position:relative;}
    .contact .banner figure {}
    .contact .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);
    }
    .contact .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; 
    }
    .contact .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;
    }
    .contact .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;
    }
    .contact .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;
    }
    .contact .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;
    }

}

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

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

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

    /* $section-contents */
    .section-contents {padding:30px 0;}
    .section-contents .contact-info {
        margin-bottom:20px;
        text-align:center;
    }
    .section-contents .address {margin-bottom:20px;}
    .section-contents .phone {margin-bottom:20px;}
    .section-contents .email {margin-bottom:20px;}
}

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

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

}