/*****************************************************************
    Responsive
*****************************************************************/
/*****************************************************************
    Spotlight
*****************************************************************/
@media (max-width: 1300px) {
.wrapper{max-width: 100%; padding:0 15px;}
#HomePage .section-brown{width: 100%;}
}

@media (max-width: 1200px) {

    .spotlight { display: none; }
    #Company .col-md-7 { width: 100% !important; }
    #Company .col-md-2 { display: none !important; }
    #Company .fixed-page { display: none !important; }
    #RecipesIndex .col-md-10 { width: 100% !important; }
    #RecipesIndex .col-md-2 { display: none !important; }
    #RecipesDetail .col-md-10 { width: 100% !important; }
    #RecipesDetail .col-md-2 { display: none !important; }
}
 
 /*****************************************************************
    Tablet
*****************************************************************/
    @media (max-width: 1000px) {
        img{max-width: 100%}
        .wrapper { position: relative; display: block; margin: auto; width: 100%; }
        .extraSmall-wrapper { position: relative; display: block; margin: auto; width: 95%; }
        .extraSmall-wrapper-promo { position: relative; display: block; margin: auto; width: 84%; }
        .small-wrapper { position: relative; display: block; margin: auto; width: 97%; }
        .right { margin-right: 0; }
        .pull-bottom { padding-top: 50px; }
        .content { width: 100%; }

        /*Footer*/
        #Footer { text-align: center; }
        .footer-top { display: none; }
        .footer-center .address { float: none !important; }
        .footer-center .line { display: none !important; }
        .footer-center .col-md-5 { width: 100% !important; margin-top: 10px; }
        .footer-center .row .col-md-3 { width: 10% !important; }
        .footer-center .row .col-md-2 { width: 10% !important; }
        .footer-center .row .col-md-5 { width: 22% !important; text-align: left !important; margin: 0; }
        .footer-center .row .col-md-1 { width: 29% !important; display: block !important; }
        .footer-center .fbFooter { display: none; }
        .footer-bottom .copyright { float: none !important; }


        /* promotions spot */
        .spotlight { margin: 10px 0; }

        /* back */
        .mobile-backTo { float: left; vertical-align: middle; display: block; }
            .mobile-backTo a { color: #452C28; font-size: 16px; font-family: Aleo; }
                .mobile-backTo a:hover { color: #87A328; }
                .mobile-backTo a .green { color: #87A328; }

        /* sections  */
        .section-content { font-family: 'Spring LP'; color: white; position: absolute; left: 0; right: 0; z-index: 1; text-align: center; top: 30px; }
            .section-content.color-brown { color: #452C28; -webkit-transition: ease-out 1s; -moz-transition: ease-out 1s; -o-transition: ease-out 1s; transition: ease-out 1s; }
            .section-content.top { top: 20px; }
            .section-content.medtop { top: 18px; }
            .section-content.medmedtop { top: 20px; }
            .section-content.minTop { top: 20px; }
            .section-content.mob-t { top: 10px; }
            .section-content.top-mob { top: 10px; }
            .section-content h1 { font-size: 70px; display: inline-block; line-height: 90px; }
            .section-content h2 { font-size: 30px; display: block; margin-bottom: 30px; }
            .section-content h3 { font-size: 52px; display: block; text-transform: initial; line-height: 0; }
            .section-content h4 { font-size: 21px; display: block; font-family: Aleo Bold; text-transform: uppercase; margin-top: -10px; }
            .section-content h5 { font-size: 54px; }
            .section-content a { font-size: 28px; display: block; color: white; margin-top: -30px; }
                .section-content a:hover { color: #C5C71E; }
            .section-content.color-brown a { color: #452C28; }
                .section-content.color-brown a:hover { color: #F5ECDD; }
            .section-content .icon-logo-ground { margin-top: 0; }


        /* Header Html */
        #Mobile { display: block; }
            #Mobile .fa-bars { font-size: 34px; color: #452C28; cursor: pointer; margin-left: 10px; margin-top: 20px; }
            #Mobile .nav-bar { display: none; margin-bottom: -16px; }
            #Mobile .show-nav { list-style: none; position: relative; display: inline-table; padding: 0; color: white; background-color: #F5ECDD; width: 100%; }
            #Mobile ul li { padding: 5px 0; padding-left: 10px; }
                #Mobile ul li a { color: #452C28; }
                    #Mobile ul li a:hover { color: #87A328; }
#Mobile .icon-logotipo {
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
    top: 10px;
    margin: auto;
}
        #Header #Mobile .bar { margin-top: 15px; }

        #Header { height: 200px; }
            #Header .menu { display: none; }



        /* HomePage */

        #PromoProducts .wrapper { position: relative; display: block; margin: auto; width: 90%; }
        #PromoProducts .box-prod .box { display: inline-block; vertical-align: top; width: 45.3333%; margin-right: 20px; margin-bottom: 20px; }

        #HomePage { display: block; }
            #HomePage .none { display: none; }
            #HomePage .navegation-section { display: none; }
            /*#HomePage .v-mobile { background-size: 100% !important; max-height: 217px; }
            #HomePage .v-mobile-two { background-size: 100% !important; max-height: 211px; }
            #HomePage .v-mobile-three { background-size: 100% !important; max-height: 300px; }
            #HomePage .v-mobile-four { background-size: 100% !important; max-height: 203px; }
            #HomePage .v-mobile-five { background-size: 100% !important; max-height: 215px; }*/

            #HomePage .v-mobile { background-size: cover !important; max-height: 450px; }
            #HomePage .v-mobile-two { background-size: cover !important; max-height: 450px; }
            #HomePage .v-mobile-three { background-size: cover !important; max-height: 450px; }
            #HomePage .v-mobile-four { background-size: cover !important; max-height: 450px; }
            #HomePage .v-mobile-five { background-size: cover !important; max-height: 350px; }


            #HomePage .sec-one { margin-top: -108px !important; }
            #HomePage .section-brown { width: 100%; height: 100%; padding: 10px 0 15px 0; }
                #HomePage .section-brown .content .social { display: none; }
                #HomePage .section-brown .content h5 { font-size: 20px; text-align: left !important; }
                #HomePage .section-brown .content .apple { margin-right: 0; font-size: 15px; }



        /* Company */
        #Company .v-mobile { background-size: 100% !important; max-height: 217px; margin-top: -107px !important; }
        #Company .box-content { padding: 10px 10px 25px 10px; }
        #Company .col-md-7 { width: 100%; }

        /* Products Index */
        #ProductsIndex .v-mobile { background-size: 100% !important; max-height: 217px; margin-top: -107px !important; }
        #ProductsIndex .box-content { width: 90%; }

        /* Promotions */
        #PromoProducts .v-mobile-three { background-size: 100% !important; background: url('/Content/app/images/background6.jpg') no-repeat !important; max-height: 380px; margin-top: -107px !important; }
        #PromoProducts .box-content { width: 90%; }

        /*ListProducts*/

        #ListProducts .v-mobile-three { background-size: 100% !important; background: url('/Content/app/images/background15.jpg') no-repeat !important; max-height: 200px; margin-top: -107px !important; }
        #ListProducts .box-content { width: 90%; }
        #ListProducts .fixed-page { display: none; }
        #ListProducts .spotlight { display: none; }
        #ListProducts .nav { display: none; }
        #ListProducts .box-prod { text-align: center !important; }

        /*ProductsDetail*/

        #ProductsDetail .v-mobile-three { background-size: 100% !important; background: url('/Content/app/images/background15.jpg') no-repeat !important; max-height: 200px; margin-top: -107px !important; }
        #ProductsDetail .box-content { width: 90%; }
        #ProductsDetail .nav { display: none; }
        #ProductsDetail .box-prod { text-align: center !important; }
        #ProductsDetail .col-md-7 { width: 100%; }

        /* contacts */
        #Contact .v-mobile-six { background-size: 100% !important; max-height: 227px; margin-top: -107px !important; }
        #Contact .address { margin: 0; }
            #Contact .address .logo { background: url('/Content/app/images/sprites-src.png') -2px -787px; width: 204px; height: 202px; display: inline-block; position: relative; margin-bottom: 30px; }
            #Contact .address .contacts { float: none; margin-right: 0; }

        /* RecipesIndex */

        #RecipesIndex .v-mobile-seven { background-size: 100% !important; max-height: 280px; margin-top: -107px !important; }
        #RecipesIndex .box-content { width: 95%; }
        #RecipesIndex .socialTag { display: none; }
        #RecipesIndex .fixed-page { display: none; }
        #RecipesIndex .spotlight { display: none; }

        /* RecipesDetail */
        #RecipesDetail .v-mobile-seven { background-size: 100% !important; max-height: 280px; margin-top: -107px !important; }
        #RecipesDetail .v-mobile-four { background-size: 100% !important; max-height: 205px; margin-top: -107px !important; }
        #RecipesDetail .v-mobile-five { background-size: 100% !important; max-height: 205px; margin-top: -107px !important; }

        /* recipe details */
        .content-detail h2 { font-size: 45px; }
        .content-detail .buttons { margin-top: 20px; margin-bottom: 10px; }
            .content-detail .buttons .download { display: inline-block; }
            .content-detail .buttons .share { float: none; position: relative; top: -7px; }
        .content-detail ol { padding-left: 10px !important; width: 98%; }
        .content-detail .buttons .backTo { display: none; }
        .content-detail .recipe.green { margin-left: 0; }
#PromoProducts .box-prod{text-align: center;}

#PromoProducts .box-prod .box .box-image img {max-width: 64%; max-height: 100%; padding-bottom: 10px; position: absolute; bottom: 0; left: 0; }

        /* icons */
        .icon { display: inline-block; }
            .icon.icon-logotipo { background: url('/Content/app/images/sprites-src.png') -347px -2px; width: 55px; height: 55px; }
            .icon.icon-logo-ground { background: url('/Content/app/images/sprites-src.png') -592px -420px; width: 158px; height: 112px; }
            .icon.icon-projects { background: url('/Content/app/images/sprites-src.png') -500px -375px; width: 263px; height: 32px; }
    }


/*****************************************************************
    Smartphones
*****************************************************************/
    @media (max-width: 500px) {
        #Header { height: auto !important; }
        /* geral */
        .wrapper { position: relative; display: block; margin: auto; width: 100%; }
        .extraSmall-wrapper { position: relative; display: block; margin: auto; width: 95%; }
        .extraSmall-wrapper-promo { position: relative; display: block; margin: auto; width: 98%; }
        .small-wrapper { position: relative; display: block; margin: auto; width: 97%; }
        .right { margin-right: 0; }
        .pull-bottom { padding-top: 0; }


        .content { width: 100%; }
            .content .content-recipe .time { margin-bottom: 30px; }


        /* promotions spot */
        .spotlight { margin: 10px 0; }


        /* sections  */
        .section-content { font-family: 'Spring LP'; color: white; position: absolute; left: 0; right: 0; z-index: 1; text-align: center; top: 30px; }
            .section-content img { max-width: 80%; margin:15px 0}
            .section-content.color-brown { color: #452C28; -webkit-transition: ease-out 1s; -moz-transition: ease-out 1s; -o-transition: ease-out 1s; transition: ease-out 1s; }
            .section-content.top { top: -5px; }
            .section-content.medtop { top: -5px; }
            .section-content.minTop { top: -6px; }
            .section-content.mob-t { top: 0; }
            .section-content.top-mob { top: 20px; }
            .section-content h1 { font-size: 54px; display: inline-block; }
            .section-content h2 { font-size: 30px; display: block; margin-bottom: 30px; }
            .section-content h3 { font-size: 42px; display: block; text-transform: initial; line-height: 0; }
            .section-content h4 { font-size: 14px; display: block; font-family: Aleo Bold; text-transform: uppercase; margin-top: -10px; }
            .section-content h5 { font-size: 48px; }
            .section-content a { font-size: 28px; display: block; color: white; margin-top: -30px; }
                .section-content a:hover { color: #C5C71E; }
            .section-content.color-brown a { color: #452C28; }
                .section-content.color-brown a:hover { color: #F5ECDD; }
            .section-content .icon-logo-ground { margin-top: 0; }

        /* recipe details */
        .content-detail h2 { font-size: 45px; }
        .content-detail .buttons { margin-top: 20px; }
            .content-detail .buttons .download { display: inline-block; }
            .content-detail .buttons .share { float: none; position: relative; top: -7px; }
        .content-detail ol { padding-left: 10px !important; width: 98%; }
        .content-detail .buttons .backTo { display: none; }


        /* back */
        .mobile-backTo { float: left; vertical-align: middle; display: block; }
            .mobile-backTo a { color: #452C28; font-size: 16px; font-family: Aleo; }
                .mobile-backTo a:hover { color: #87A328; }
                .mobile-backTo a .green { color: #87A328; }

        #PromoProducts .box-prod .box { display: inline-block; vertical-align: top; width: 100%; margin-right: 20px; margin-bottom: 20px; }

        /* section titles */
        .section-title h2 { font-size: 50px; color: #87A328; font-family: 'Spring LP'; text-align: center; margin: 20px 0px; display: inline-block; vertical-align: middle; line-height: 50px; }
        .section-title .icon-trace { display: none; }

        /* Header Html */
        #Mobile { display: block; }
            #Mobile .fa-bars { font-size: 34px; color: #452C28; cursor: pointer; margin-left: 10px; margin-top: 20px; }
            #Mobile .nav-bar { display: none; margin-bottom: -16px; }
            #Mobile .show-nav { list-style: none; position: relative; display: inline-table; padding: 0; color: white; background-color: #F5ECDD; width: 100%; }
            #Mobile ul li { padding: 5px 0; padding-left: 10px; }
                #Mobile ul li a { color: #452C28; }
                    #Mobile ul li a:hover { color: #87A328; }
#Mobile .icon-logotipo {
    position: absolute;
    z-index: 1;
    left: 70px;
    right: unset;
    top: 10px;
}
        #Header #Mobile .bar { margin-top: 15px; }

        #Header { height: 200px; }
            #Header .menu { display: none; }

        /* HomePage */
        .section-content.medmedtop { top: 0; }

        #HomePage { display: block; }
            #HomePage .none { display: none; }
            #HomePage .navegation-section { display: none; }
            #HomePage .v-mobile { background-size: cover !important; max-height: 350px; }
            #HomePage .v-mobile-two { background-size: cover !important; max-height: 350px; }
            #HomePage .v-mobile-three { background-size: cover !important; max-height: 350px; }
            #HomePage .v-mobile-four { background-size: cover !important; max-height: 350px; }
            #HomePage .v-mobile-five { background-size: cover !important; max-height: 250px; }
            #HomePage .sec-one { margin-top: -108px !important; }
            #HomePage .section-brown { width: 100%; height: 100%; padding: 10px 0 15px 0; }
                #HomePage .section-brown .content .social { display: none; }
                #HomePage .section-brown .content h5 { font-size: 20px; text-align: left !important; }
                #HomePage .section-brown .content .apple { margin-right: 0; font-size: 15px; }

        /* Company */
        #Company .v-mobile { background-size: 100% !important; max-height: 114px; margin-top: -107px !important; }
        #Company .fixed-page { display: none; }
        #Company .spotlight { display: none; }
        #Company .box-content { padding: 10px 10px 25px 10px; }

        /* Products Index */
        #ProductsIndex .v-mobile { background-size: 100% !important; max-height: 114px; margin-top: -107px !important; }
        #ProductsIndex .box-content { width: 90%; }

        /* Promotions */
        #PromoProducts .v-mobile-three { background-size: 100% !important; background: url('/Content/app/images/background6.jpg') no-repeat !important; max-height: 300px; margin-top: -107px !important; }
        #PromoProducts .box-content { width: 90%; }

        /*ListProducts*/

        #ListProducts .v-mobile-three { background-size: 100% !important; background: url('/Content/app/images/background15.jpg') no-repeat !important; max-height: 120px; margin-top: -107px !important; }
        #ListProducts .box-content { width: 90%; }
        #ListProducts .section-content { margin-top: 10px !important; }

        /*ProductsDetail*/

        #ProductsDetail .v-mobile-three { background-size: 100% !important; background: url('/Content/app/images/background15.jpg') no-repeat !important; max-height: 120px; margin-top: -107px !important; }
        #ProductsDetail .box-content { width: 90%; }
        #ProductsDetail .section-content { margin-top: 10px !important; }

        /* contacts */
        #Contact .v-mobile-six { background-size: 100% !important; max-height: 120px; margin-top: -107px !important; }
        #Contact .address { margin: 0; }
            #Contact .address .logo { background: url('/Content/app/images/sprites-src.png') -2px -787px; width: 204px; height: 202px; display: inline-block; position: relative; margin-bottom: 30px; }
            #Contact .address .contacts { float: none; margin-right: 0; }

        /* RecipesIndex */

        #RecipesIndex .v-mobile-seven { background-size: 100% !important; max-height: 120px; margin-top: -107px !important; }
        #RecipesIndex .box-content { width: 95%; }
        #RecipesIndex .socialTag { display: none; }

        /* RecipesDetail */
        #RecipesDetail .v-mobile-seven { background-size: 100% !important; max-height: 120px; margin-top: -107px !important; }
        #RecipesDetail .v-mobile-four { background-size: 100% !important; max-height: 107px; margin-top: -107px !important; }
        #RecipesDetail .v-mobile-five { background-size: 100% !important; max-height: 112px; margin-top: -107px !important; }

        /* Footer */



        /* icons */
        .icon { display: inline-block; }
            .icon.icon-logotipo { background: url('/Content/app/images/sprites-src.png') -347px -2px; width: 55px; height: 55px; }
            .icon.icon-quality-prod { background: url('/Content/app/images/sprites-src.png') -151px -532px; width: 143px; height: 45px; }
                .icon.icon-quality-prod.prod { background: url('/Content/app/images/sprites-src.png') -151px -580px; width: 159px; height: 47px; }
                .icon.icon-quality-prod.promo { background: url('/Content/app/images/sprites-src.png') -154px -629px; width: 196px; height: 56px; }
                .icon.icon-quality-prod.color-brown { background: url('/Content/app/images/sprites-src.png') -0px -580px; width: 150px; height: 46px; }
                .icon.icon-quality-prod.city { background: url('/Content/app/images/sprites-src.png') -158px -695px; width: 146px; height: 48px; }
            .icon.icon-logo-ground { background: url('/Content/app/images/sprites-src.png') -430px -224px; width: 80px; height: 50px; }
            .icon.icon-projects { background: url('/Content/app/images/sprites-src.png') -500px -375px; width: 263px; height: 32px; }
            .icon.icon-cabaz-prod.prod { background: url('/Content/app/images/sprites-src.png') -340px -527px; width: 183px; height: 50px; }
    }