@charset "UTF-8";
@import 'fonts.css';
@import 'html5reset.css';
/* CSS Document */


body {
    width: 100%;
    background: #f6f0ea url(../images/tan-bg.jpg) repeat;
    font: 16px/1.5 'gandhi_sansregular', helvetica, arial, sans-serif;
}

#bodyWrapper {
    width: 100%;
    font-size: 1.250em; /* Set the base font size to 20px */
    color: #565656;
}

* {
    box-sizing: border-box;
}

/* -----------------------------------------------
	HEADER STYLES
----------------------------------------------- */

header {
}

    header #Brand {
        background: url(../images/pg-bg.jpg) no-repeat;
        background-size: cover;
        width: 50%;
        min-height: 600px;
        height: 600px;
        float: left;
        overflow: hidden;
    }

        header #Brand h1.logo {
            background: url(../images/pg-logo.png) no-repeat;
            width: 460px;
            height: 252px;
            margin: 0 auto;
            text-indent: -999999px;
            position: relative;
            top: 25%;
        }

    header #About {
        width: 50%;
        float: right;
        height: 600px;
        text-align: center;
        background: url(../images/about-bg.png) no-repeat;
        background-size: cover;
    }

        header #About .aboutContent {
            padding: 50px 20%;
        }

            header #About .aboutContent .products img {
                width: 60%;
                height: auto;
            }

        header #About h2 {
            font: 1.800em 'klinic_slabmedium', 'gandhi_sansregular', helvetica, arial, sans-serif;
            padding: 30px 0;
        }

        header #About .publix {
            padding: 40px 0 0 0;
            display: none;
        }

            header #About .publix .publix-locations {
                background: url(../images/publix-locations-btn.png) no-repeat;
                height: 43px;
                width: 295px;
                text-indent: -999999px;
                margin: 25px auto 0 auto;
            }

                header #About .publix .publix-locations a,
                header .scroll a {
                    display: block;
                    height: 100%;
                    width: 100%;
                }

    header .scroll {
        background: url(../images/scroll-arrow.png) no-repeat;
        width: 60px;
        height: 60px;
        text-indent: -999999px;
        position: absolute;
        left: 49%;
        top: 520px;
        cursor: pointer;
    }

@media only screen and (min-width: 0px) and (max-width: 830px) {

    header #Brand,
    header #About {
        float: none;
        width: 100%;
    }
}

/* -----------------------------------------------
	FOOTER STYLES
----------------------------------------------- */


footer * {
    box-sizing: initial;
}

footer {
    width: 100%;
    background: url(../images/footer-palms.png) center center no-repeat;
    background-size: 100%;
}

    footer .footerContent {
        padding: 50px;
    }

        footer .footerContent .history {
            width: 40%;
            float: left;
            padding: 0 0 0 350px;
        }

            footer .footerContent .history h2 {
                font: 1.800em 'klinic_slabmedium', 'gandhi_sansregular', helvetica, arial, sans-serif; /* 36px*/
                padding: 0 0 20px 0;
            }

        footer .footerContent .pinterest {
            padding: 20px 0 0 0;
        }

            footer .footerContent .pinterest img {
                vertical-align: middle;
                margin: 0 10px 0 0;
            }

            footer .footerContent .pinterest a {
                color: #cd2129;
            }

        footer .footerContent .contact {
            float: right;
            width: 20%;
            font-size: 0.900em; /* 18px */
            padding: 0 150px 0 0;
        }

            footer .footerContent .contact a:link,
            footer .footerContent .contact a:visited {
                color: #a3d65c;
            }

            footer .footerContent .contact a:hover,
            footer .footerContent .contact a:active {
                color: #7bb206;
            }

            footer .footerContent .contact .rawlLogo {
                background: url(../images/rawl-logo.png) no-repeat;
                width: 160px;
                height: 80px;
                text-indent: -999999px;
                margin: 0 0 20px 0;
            }

                footer .footerContent .contact .rawlLogo a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }



section.recipe {
    width: 100%;
    display: block;
    overflow: hidden;
}

    section.recipe .recipeContent {
        width: 100%;
        display: table;
        padding: 40px;
        position: relative;
        min-height: 480px;
    }

        section.recipe .recipeContent .bag {
            display: inline-block;
            width: 25%;
            min-width: 400px;
            background-size: 100%;
            height: 100%;
            position: absolute;
            top: 40px;
        }

        section.recipe .recipeContent.odd .bag {
            left: 0;
        }

        section.recipe .recipeContent.even .bag {
            right: 0;
        }

        section.recipe .recipeContent .bag img {
            width: 100%;
        }

        section.recipe .recipeContent .recipes {
            display: inline-block;
            padding: 0 30px;
            width: 65%;
            position: relative;
        }

        section.recipe .recipeContent.even .recipes {
            display: inline-block;
            padding: 0 30px;
            width: 75%;
            position: relative;
        }

        section.recipe .recipeContent.odd .recipes {
            display: inline-block;
            padding: 0 30px;
            width: 75%;
            position: relative;
            left: 27%;
        }

        section.recipe .recipeContent.even .bag {
            right: 40px;
        }

        section.recipe .recipeContent.odd .bag {
            left: 40px;
        }

        section.recipe .recipeContent .recipes .box {
            height: 260px;
            width: 260px;
            display: inline-block;
            margin: 10px 20px 10px 0;
            position: relative;
        }

            section.recipe .recipeContent .recipes .box img {
                height: 100%;
                width: 100%;
            }

            section.recipe .recipeContent .recipes .box .overbox {
                /*display: none;*/
            }

.recipes h2 {
    font: 1.800em 'klinic_slabbook', helvetica, arial, sans-serif; /*36px*/
    color: #ffffff;
    padding: 0 0 35px 0;
}

.showMore {
    position: relative;
    display: none;
}

.showMoreWrapper {
    width: 1120px;
    text-align: center;
    margin-top: 20px;
}

    .showMoreWrapper .showMoreLink {
        display: inline-block;
        font: 0.800em 'gandhi_sansregular', helvetica, arial, sans-serif; /*16px */
        /*background: #e7364f;*/
        color: #ffffff;
        padding: 10px 40px;
        text-align: center;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -o-border-radius: 30px;
        cursor: pointer;
    }

.recipe .title {
    font: 1.500em 'klinic_slabbook', helvetica, arial, sans-serif; /*36px*/
    padding: 0 0 15px 0;
    margin: 0 0 15px 0;
    border-bottom: 1px solid;
}

.recipe .tagline {
    font: 0.800em 'gandhi_sansregular', helvetica, arial, sans-serif; /*16px */
    /*background: #e7364f;*/
    color: #ffffff;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
}

    .recipe .tagline a {
        color: #ffffff;
    }


.box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    width: 100%;
    height: auto;
}

.box .overbox {
    background-color: rgba(255,255,255,.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 10% 10%;
    overflow: hidden;
}

.box:hover .overbox {
    opacity: 1;
}

.box .overtext {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
}

.box .title {
    opacity: 0;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.box .tagline {
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
    opacity: 1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
}


@media only screen and (min-width: 0px) and (max-width: 1742px) {

    section.recipe .recipeContent.odd .recipes {
        display: inline-block;
        width: 743px;
        padding: 0 30px 0 100px;
    }

    section.recipe .recipeContent.even .recipes {
        display: inline-block;
        width: 743px;
        padding: 0 30px 0 100px;
    }

    .showMoreWrapper {
        width: 540px;
        text-align: center;
        margin-top: 20px;
    }
}

@media only screen and (min-width: 676px) and (max-width: 1205px) {

    section.recipe .recipeContent.odd .recipes {
        display: block;
        width: 625px;
        padding: 0 30px;
        margin: 0 auto;
        left: initial;
    }

    section.recipe .recipeContent.even .recipes {
        display: block;
        width: 625px;
        padding: 0 30px;
        margin: 0 auto;
        right: initial;
    }

    section.recipe .recipeContent .bag {
        display: none !important;
    }

    .showMoreWrapper {
        width: 540px;
        text-align: center;
        margin-top: 20px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 675px) {

    section.recipe .recipeContent.odd .recipes {
        display: block;
        width: 260px;
        padding: 0;
        margin: 0 auto;
        left: initial;
    }

    section.recipe .recipeContent.even .recipes {
        display: block;
        width: 260px;
        padding: 0;
        margin: 0 auto;
        right: initial;
    }

    section.recipe .recipeContent .recipes .box {
        height: 260px;
        width: 260px;
        display: inline-block;
        margin: 0 0 20px 0;
    }

    section.recipe .recipeContent .bag {
        display: none !important;
    }

    .showMoreWrapper {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
}


@media only screen and (min-width: 0px) and (max-width: 1700px) {




    header .scroll {
        left: 48%;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1480px) {

    header #About .aboutContent {
        padding: 50px 10%;
    }

    footer .footerContent .history {
        width: 50%;
        padding: 0 0 0 5%;
    }

    footer .footerContent .contact {
        padding: 0 5% 0 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1124px) {

    header #Brand h1.logo {
        background-size: 100%;
        width: 80%;
    }

    header .scroll {
        left: 47%;
    }
}


@media only screen and (min-width: 0px) and (max-width: 800px) {

    header #Brand,
    header #About {
        float: none;
        width: 100%;
    }

    header #Brand {
        height: 460px;
        min-height: 0px;
    }

        header #Brand h1.logo {
            background-size: 100%;
            width: 58%;
            top: 15%;
        }

    header .scroll {
        top: 360px;
        left: 45%;
    }

    header #About {
        height: auto;
    }

    footer .footerContent .history,
    footer .footerContent .contact {
        width: 100%;
        float: none;
        padding: 0;
        text-align: center;
    }

    footer .footerContent .contact {
        margin: 50px 0 0 0;
    }

        footer .footerContent .contact .rawlLogo {
            margin: 0 auto 20px auto;
        }
}

@media only screen and (min-width: 0px) and (max-width: 620px) {

    header #Brand {
        height: 300px;
        min-height: 0px;
    }

    header .scroll {
        top: 270px;
        left: 42%;
    }
}

@media only screen and (min-width: 0px) and (max-width: 400px) {

    header #Brand {
        height: 230px;
        min-height: 0px;
    }

    header .scroll {
        top: 200px;
        left: 42%;
    }
}

@media handheld, only screen and (max-device-width: 1024px) {
    .box {
        overflow: hidden;
    }

        .box .overbox {
            background-color: rgba(255,255,255,.8);
            position: absolute;
            top: 70%;
            left: 0;
            z-index: 100;
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
            opacity: 1;
            width: 100%;
            height: 100%;
            padding: 5% 10%;
            overflow: hidden;
        }

        .box:hover .overbox {
            opacity: 1;
        }

        .box .overtext {
            -webkit-transition: none;
            -moz-transition: none;
            -o-transition: none;
            -ms-transition: none;
            transition: none;
            transform: none;
            -webkit-transform: none;
            border: none;
            text-align: center;
        }

        .box .title {
            opacity: 1;
            transition: none;
        }

        .box .tagline {
            display: none;
            opacity: 1;
            transform: translateX(0px);
            -webkit-transform: translateX(0px);
        }

    .recipe .title {
        font: 1.100em 'klinic_slabbook', helvetica, arial, sans-serif; /*36px*/
        padding: 0 0 15px 0;
        margin: 0 0 15px 0;
    }
}




/*RECIPE PAGE*/

#Wrapper {
    position: relative;
}

#HeaderWrapper {
    width: 100%;
    background-color: #FCFBF9;
    border-bottom: 1px solid #cdcdcd;
}

    #HeaderWrapper #HeaderContent {
        max-width: 1600px;
        margin: 0 auto;
        padding: 10px;
    }


#FooterWrapper {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: #3E3935;
}

    #FooterWrapper #FooterContent {
        max-width: 1600px;
        margin: 0 auto;
        padding: 10px;
    }

        #FooterWrapper #FooterContent #LogoWrapper {
            display: inline-block;
            float: left;
        }

        #FooterWrapper #FooterContent #FooterInfoWrapper {
            display: inline-block;
            float: right;
            color: #ffffff;
        }


#BodyWrapper {
    width: 100%;
    padding-bottom: 74px;
}

    #BodyWrapper #BodyContent {
        max-width: 1600px;
        margin: 0 auto;
        padding: 40px 0;
    }

        #BodyWrapper #BodyContent .sectionTitle {
            font-family: 'klinic_slabmedium';
            color: #565656;
            line-height: 1.2em;
            padding: 0px 0px 20px 0px;
            border-bottom: 1px solid #cdcdcd;
            margin: 0px 0px 20px 0px;
        }

        #BodyWrapper #BodyContent #LeftSide {
            width: 600px;
            display: inline-block;
            float: left;
            margin-bottom: 40px;
        }

            #BodyWrapper #BodyContent #LeftSide .ImageWrapper {
                width: 100%;
                margin: 0 0 50px 0;
                -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
                -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
                -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
                -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
                box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
            }

                #BodyWrapper #BodyContent #LeftSide .ImageWrapper img {
                    width: 100%;
                }

        #BodyWrapper #BodyContent #RightSide .ImageWrapper {
            width: 100%;
            margin: 0 0 50px 0;
            -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
            -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
            -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
            -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
            box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
            display: none;
        }

            #BodyWrapper #BodyContent #RightSide .ImageWrapper img {
                width: 100%;
            }


        #BodyWrapper #BodyContent #RightSide {
            width: 1000px;
            padding-left: 100px;
            display: inline-block;
            float: left;
            color: #565656;
            margin-bottom: 40px;
        }

            #BodyWrapper #BodyContent #RightSide .RelatedRecipesWrapper {
                display: none;
            }


.rrWrapper {
    width: 100%;
    display: table;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
}

    .rrWrapper .rrImageWrapper {
        display: table-cell;
        height: 140px;
        width: 140px;
    }

        .rrWrapper .rrImageWrapper img {
            width: 100%;
            height: 100%;
        }

    .rrWrapper .rrInfoWrapper {
        display: table-cell;
        vertical-align: middle;
        padding: 20px;
        background-color: #FCFBF9;
    }

        .rrWrapper .rrInfoWrapper .rrName {
            font-family: 'klinic_slabmedium';
            color: #565656;
            line-height: 1.2em;
            padding: 0px 0px 20px 0px;
            margin: 0px 0px 10px 0px;
            font-size: 25px;
        }

        .rrWrapper .rrInfoWrapper .rrLinkWrapper {
            width: 100%;
        }

            .rrWrapper .rrInfoWrapper .rrLinkWrapper .rrLink {
                background-color: #A3D75B;
                color: #FCFBF9;
                padding: 10px 40px;
                border-radius: 30px;
            }

#ShareSection {
    padding: 0 0 5px 0;
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 10px;
}

    #ShareSection .share {
        display: inline-block;
        float: left;
        height: 34px;
        padding: 5px;
    }

    #ShareSection .print {
        display: inline-block;
        float: right;
    }

        #ShareSection .print .printLinkWrapper {
            width: 100%;
            padding-top: 5px;
        }

            #ShareSection .print .printLinkWrapper .printLink {
                background-color: #A3D75B;
                color: #FCFBF9;
                padding: 5px 40px;
                border-radius: 30px;
            }

#RecipeInfoWrapper {
}

    #RecipeInfoWrapper #SPCWrapper {
        display: block;
        width: 100%;
        border-collapse: separate;
        border-spacing: 10px;
    }

        #RecipeInfoWrapper #SPCWrapper .spcSection {
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            background-color: #FCFBF9;
            padding: 20px;
            width: 285px;
            -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
            -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
            -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
            -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
            box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        }

        #RecipeInfoWrapper #SPCWrapper #PrepWrapper.spcSection {
            margin: 0 18px;
        }

        #RecipeInfoWrapper #SPCWrapper .spcSection .icon {
            margin-bottom: 5px;
        }


#IngredFeatWrapper {
    display: block;
    width: 100%;
    position: relative;
    padding: 30px 0;
}

#IngredientsWrapper {
    display: inline-block;
    float: left;
    width: 60%;
    padding-right: 30px;
}



    #IngredientsWrapper ul {
        list-style: circle;
        list-style-position: inside;
    }

#FeaturedProductWrapper {
    display: inline-block;
    float: right;
    width: 40%;
}

#FeaturedProductWrapper {
    display: inline-block;
    float: right;
    width: 40%;
}

    #FeaturedProductWrapper #FeaturedProductContentWrapper {
        width: 100%;
        background-color: #FCFBF9;
        text-align: center;
        padding: 20px 80px;
        -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    }

        #FeaturedProductWrapper #FeaturedProductContentWrapper #FeaturedImageWrapper {
            width: 100%;
            margin: 10px 0;
        }

            #FeaturedProductWrapper #FeaturedProductContentWrapper #FeaturedImageWrapper img {
                width: 100%;
            }

#DirectionsWrapper {
    width: 100%;
}


@media only screen and (min-width: 0px) and (max-width: 1650px) {

    #BodyWrapper {
        padding: 0 10px 74px 10px;
    }

        #BodyWrapper #BodyContent {
            width: 100%;
        }

            #BodyWrapper #BodyContent #LeftSide {
                width: 37.5%;
            }

            #BodyWrapper #BodyContent #RightSide {
                width: 62.5%;
            }

    #RecipeInfoWrapper #SPCWrapper .spcSection {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        background-color: #FCFBF9;
        padding: 2.2%;
        width: 31.6%;
        -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    }

    #RecipeInfoWrapper #SPCWrapper #PrepWrapper.spcSection {
        margin: 0 2%;
    }

    #FeaturedProductWrapper #FeaturedProductContentWrapper {
        width: 100%;
        background-color: #FCFBF9;
        text-align: center;
        padding: 5.5% 22.2%;
        -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    }
}

@media only screen and (min-width: 0px) and (max-width: 1173px) {


    #RecipeInfoWrapper #SPCWrapper .spcSection {
        display: block;
        text-align: center;
        vertical-align: middle;
        background-color: #FCFBF9;
        padding: 2.2%;
        margin: 0 0 20px 0;
        width: 100%;
        -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,.25);
    }

    #RecipeInfoWrapper #SPCWrapper #PrepWrapper.spcSection {
        margin: 0 0 20px 0;
    }

    #FeaturedProductWrapper {
        display: none;
    }

    #IngredientsWrapper {
        display: block;
        float: none;
        width: 100%;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1010px) {
    #BodyWrapper #BodyContent {
        width: 80%;
    }

        #BodyWrapper #BodyContent #LeftSide {
            display: none;
        }

        #BodyWrapper #BodyContent #RightSide {
            display: block;
            width: 100%;
            padding: 0;
        }

            #BodyWrapper #BodyContent #RightSide .RelatedRecipesWrapper {
                display: block;
                margin: 20px 0 0 0;
            }



    .rrWrapper .rrInfoWrapper {
        display: table-cell;
        vertical-align: middle;
        padding: 3.33%;
        background-color: #FCFBF9;
    }


    #BodyWrapper #BodyContent #LeftSide .ImageWrapper {
        /*display: none;*/
    }


    #BodyWrapper #BodyContent #RightSide .ImageWrapper {
        width: 100%;
        margin: 20px 0 20px 0;
        -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
        -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
        -ms-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
        -o-box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,.5);
        display: block;
    }

    #ShareSection {
        padding: 5px 0 5px 0;
        border-bottom: 1px solid #cdcdcd;
        border-top: 1px solid #cdcdcd;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 700px) {
    #BodyWrapper #BodyContent {
        width: 100%;
    }
}

@media only screen and (min-width: 0px) and (max-width: 600px) {

    .rrWrapper .rrImageWrapper {
        display: none;
    }


    .rrWrapper .rrInfoWrapper {
        padding: 5% 3.33% 7.5% 3.33%;
        text-align: center;
    }

    #FooterWrapper #FooterContent #LogoWrapper {
        display: block;
        float: none;
        padding: 10px 5%;
        text-align: center;
    }

    #FooterWrapper #FooterContent #FooterInfoWrapper {
        display: block;
        float: none;
        padding: 10px 5%;
        text-align: center;
    }

    #BodyWrapper {
        padding: 0 10px 164px 10px;
    }
}


/*RECIPE PAGE*/