/* CSS Reset - http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126  License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section { display:block; }
body { line-height:1; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }


:root {
  --headerRed:#e8001b;
  --offwhite:#ebecec;
  /*--gray:#67686B;*/

  /* seasonal signs purple 93278f
      sign kits grey aeaeae
      pre-made signs and posters red is header red
      sign holders blue 6eb4c4
      special requests grey 515862
  */
}

html, body { font-family: 'Open Sans', sans-serif; background-color:var(--offwhite)  }
h1 { font-size:2.5em; margin:40px 0 15px 0; line-height:1em; text-transform:uppercase; color:var(--headerRed) }
h2 { font-size:1.4em; margin:30px 0 12px 0; text-transform:uppercase; color:var(--headerRed)}
h3 { font-size:1.1em; font-weight:bold; }
p { line-height:1.4; margin:12px 0; }
button { background-color:var(--headerRed) !important; border:0 !important; }
input[type=button], select { cursor:pointer !important; }
a:link, a:visited { color:#777; }

input[type=button] { background-color:var(--headerRed); color:white; border:0; border-radius:10px; padding:.4em 2.5em; margin:.1em }
input[type=button]:disabled { background-color:gray !important; color:#bbb; cursor:not-allowed !important; }

.hideme { display:none; }

/* Bootstrap Overrides */
.container-fluid { background-color:var(--headerRed); z-index:100; }
.nav-link { color:var(--headerRed) }
    .nav-link.active { background-color:var(--headerRed) !important; }
.btn { background-color:var(--headerRed); border:0; }
.form-floating { margin-bottom:4px;}
    .form-floating textarea { height:100% !important; }

/* Account Pages */
#account { line-height:1.9;}

.logoutDiv { text-align:center; padding-top:150px; }
    .logoutDiv button { text-decoration:none;  }
.LoginArt { background-image:url(../images/LoginArt.jpg); min-height:800px; background-size:cover; background-position:center; }
    .LoginButtons { margin-top:10px; }
    .LoginButtons img { height:50px; }
    .LoginConfirm { display:flex; justify-content:space-between; margin-top:8px; }
     

/* General */
header { min-height:60px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; width:100%; }
    .headerPadding { padding:0 10px 10px 10px; }
    header .logo { margin:5px 0px; height:48px; filter:brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(6744%) hue-rotate(345deg) brightness(85%) contrast(118%); }
    .hamburger { align-self:center; }
        .navbar-toggler-icon { color:white !important; width: 40px !important; }

    /* header links*/
    #hamburgerTarget a:link, #hamburgerTarget a:link, header a:link, header a:visited { text-decoration:none; position:relative; margin:0 auto; vertical-align:middle; display:block; }
    header a:link, header a:visited { color:black; display:inline-block; }
    #hamburgerTarget a, #hamburgerTarget button { color:white; text-decoration:none; font-weight:bold; }
        #hamburgerTarget .headerBonusSubNav a:link, #hamburgerTarget .headerBonusSubNav a:visited, #hamburgerTarget .headerBonusSubNav button { color:black; }

    #hamburgerTarget { background-color:var(--headerRed); color:white; position:relative; z-index:100; text-align:center; width:100%; line-height:34px; font-size:1.2em; font-weight:bold; padding-right:1%; }
    
    header > nav { font-size:1.3em; line-height:28px; white-space:nowrap; }        

        /*.navbar-nav { background-color:var(--headerRed); color:white; position:relative; z-index:100; }*/
            /*.navbar-nav a:link, .navbar-nav a:link, header a:link, header a:visited { text-decoration:none; position:relative; color:white; display:inline-block; margin:0 auto; vertical-align:middle; }*/
        header .headerUserName { white-space:nowrap; overflow-x:hidden; overflow-y:visible; vertical-align:middle; text-overflow:ellipsis; max-width:250px; text-align:center; }
        header .headerCartIcon { height:18px; vertical-align:middle; }
        header .cartItemCount { display:block; position:absolute; top:-2px; left:50%; text-align:right; font-size:.8em; height:24px; width:24px; line-height:24px; box-shadow:0px 0px 4px var(--headerRed), 0px 0px 4px var(--headerRed); text-align:center; background-color:var(--headerRed); color:white; border-radius:100px;  }
    
    .headerBanner { color:black; text-align:center; padding:10px 0; font-size:1.25em; font-weight:bold; margin-bottom:18px; align-self:flex-end; white-space:nowrap; }
    
    .headerBonusLinks { height:30px; display:flex; justify-content:space-around; align-items:center; color:white; background-color:var(--headerRed); }
    .headerBonusLinks .dropdown { display:none; }
        .headerBonusLinks div { flex-grow:1; cursor:pointer; padding:0 8px; position:relative; text-align:center; }
        .headerBonusLinks a, .headerBonusLinks button, .headerBonusLinks li { color:white; text-decoration:none; }
    
        .headerBonusSubNav { position:absolute; line-height:50px; margin:10px 0; padding:0 15px; border:none; z-index:1000; background-color:var(--headerRed); background-color:white; box-shadow:2px 4px 4px rgb(0, 0, 0, 0.55); border-radius:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }

   
/*#shoppingNav { text-align:right; margin:10px 10px 10px 0; color:#555; font-weight:bold; }
    #shoppingNav a { color:#555; }
        #shoppingNav a { text-decoration:none; }*/


.viewContainer {  }
    .viewContainer > div { display:none; }

footer { background-color:#818285 }
    footer a, footer a:link, footer a:visited { color:white; text-decoration:none; }

    .footerRedBar { height:20px; background-color:var(--headerRed); }
    .footerLogo { text-align:center; }
        .footerLogo img { max-height:30px; }
    .footerBottom { display:flex; align-items:flex-end; font-size:.75em; justify-content:space-around; color:white; line-height:1.2; }
        .footerBottom > div { margin:8px 0; }


footer {  }
    footer > div { margin:8px 0; }
    footer .logo { margin:5px 0px; height:48px; }
    
    footer .footerHeader { font-weight:bold; margin-bottom:5px;}

    

.standardLayout { width:100%; /*max-width:1200px;*/ margin:20px auto 0 auto; padding:0; position:relative; }
.imagePage { text-align:center; }
    .imagePage img { width:98%; max-width:1400px; margin:10px auto; }

#divToast { display:none; position:fixed; z-index:10; top:20%; left:50%; transform: translate(-50%, 0); font-size:2em; background-color:var(--headerRed); color:white; padding:.4em 3em; border-radius:10px; box-shadow: 0px 0px 14px 3px rgba(50, 50, 50, 0.8); }
    #divToast a:link, #divToast a:visited { text-decoration:none; color:white; }
#divJumpToTop { display:none; position:fixed; z-index:10; bottom:20px; right:20px; cursor:pointer; font-size:1.2em; height:2.2em; line-height:2em; border-radius:600px; padding:0 25px; border:2px solid white; color:white; background-color:var(--headerRed); box-shadow:1px 1px 4px 2px rgb(0, 0, 0, 0.55); }

/* View Specific Styles */
#viewHome { width:100%; /*max-width:1200px;*/ } 
    #viewHome h1 { font-weight:bold; }
    #homeBannerImage { height:320px; width:100%; background-image:url(../images/Home/Veggies.jpg); background-size:cover; }
    #homeWidthContainer { max-width:1250px; margin:0 auto; }
    .homeCategory { display:flex; flex-direction:column; justify-content:flex-start; gap:35px; }
        .homeBlock { display:block; text-decoration:none; transition:background-color .3s, color .3s, box-shadow.6s; background-color:white; box-shadow:2px 4px 4px rgb(0, 0, 0, 0.25); width:100%; height:230px; display:flex; flex-direction:column; border-radius:10px; overflow:hidden; margin-bottom:16px; }
        .homeBlock:hover { box-shadow:4px 8px 4px rgb(0, 0, 0, 0.3); }
        .homeBlock:hover .homeBlockText { background-color:red; color:white;  }
            .homeBlockImage { height:60%; width:100%; background-color:#91b6be; background-size:cover; background-repeat:no-repeat; background-position:center }
            .homeBlockText { height:40%; padding:10px; /* line clamp for ellipsis? */ overflow:hidden; }
                .homeBlockText h3 { margin-bottom:6px; }

    /*.homeBlock .newAndTrending { background-image:url(../images/Home/whats-new-and-trendy.jpg); }*/
    .homeBlock .newAndTrending { background-image:url(../images/Home/BestYetKit.jpg); }

    .homeBlock .seasonalSignage { background-image:url(../images/Home/seasonal.jpg); }
    .homeBlock .hiringCampaign { background-image:url(../images/Home/hiring-camaign.jpg); }
    .homeBlock .deliSignage { background-image:url(../images/Home/deli.jpg); }

    .homeBlock .signsAndPosters { background-image:url(../images/Home/signs-and-posters.jpg); }
    .homeBlock .signKits { background-image:url(../images/Home/sign-kit.jpg); }
    .homeBlock .customization { background-image:url(../images/Home/customization.jpg); }
    .homeBlock .digitalSignage { background-image:url(../images/Home/digital.jpg); }

    .homeBlock .adProgram { background-image:url(../images/Home/ad-program.jpg); }
    .homeBlock .inStoreRadio { background-image:url(../images/Home/in-store-radio.jpg); }
    .homeBlock .newMovers { background-image:url(../images/Home/new-movers.jpg); }
    .homeBlock .inStoreScent { background-image:url(../images/Home/in-store-scent.jpg); }

    .homeBlock .nutritionalNewsletter { background-image:url(../images/Home/newsletter.jpg); }
    /*.homeBlock .labelInsight { background-image:url(../images/Home/label-insights.jpg); }*/
    .homeBlock .labelInsight { background-image:url(../images/Home/whats-new-and-trendy.jpg); }
    
    .homeBlock .inSeasonMagazine {  background-image:url(../images/Home/InSeason.jpg); }
    .homeBlock .askADietitian { background-image:url(../images/Home/ask-dietitian.jpg); }

    #divHomeContact { padding:20px 0; line-height:2em; }
    #divHomeContact a { display:block; color:black; text-align:center; font-size:1.2em; font-weight:bold; text-decoration:none !important; }
        #divHomeContact div { display:inline-block; height:2.2em; line-height:2em; border-radius:600px; padding:0 18px; border:2px solid white; color:white; background-color:var(--headerRed); box-shadow:2px 4px 4px rgb(0, 0, 0, 0.25); }

    /* Original Styles
    #homeRotator {  }
    #homeRotator > div { width:100%; }

    #viewHome { text-align:center; }
    #viewHome > div > div { margin:20px 0; }
    #viewHome img { width:100%; max-width:1800px; }

    #viewHome .homeCurrentCampaigns { margin:30px 0; cursor:pointer; }
        #viewHome .homeCurrentCampaigns a:link { text-decoration:none; }
        #viewHome .homeCurrentCampaigns h3 { text-decoration:none; color:black; font-size:2em; font-weight:bold; margin-top:10px; margin-bottom:20px; }
        #viewHome .homeCurrentCampaigns .ccHolder { display:flex; flex-direction:row; justify-content:space-evenly; }
            #viewHome .homeCurrentCampaigns img { width:256px !important; }
            #viewHome .homeCurrentCampaigns span { }
            */

#viewShopLanding { display:flex; flex-wrap:wrap; align-items:flex-end; text-align:center; justify-content:space-around; max-width:1400px; }
    #viewShopLanding a, #viewShopLanding a:link, #viewShopLanding a:visited { text-decoration:none; }
    #viewShopLanding > div { width:90%; position:relative; /*max-width:500px;*/ margin:30px 0; text-align:center; }
        #viewShopLanding img { max-width:100%; margin-bottom:40px; }
        #viewShopLanding > div div { display:block; margin:0 auto; bottom:0; position:relative; color:white; height:2em; line-height:2em; border-radius:6px; width:270px; background-color:var(--headerRed) }

#viewShopping { max-width:none; margin-top:0px; }
    
    #viewShopping #divProducts { margin:20px; display:flex; flex-wrap:wrap; justify-content:center; }
        #viewShopping .scaledMode { transform: scale(1.4); margin-top:90px !important; margin-left:10px !important; margin-right:10px !important; width:450px !important; height:580px !important; border:0 !important; }
        #viewShopping .largeMode { width: 640px !important; }
            #viewShopping .largeMode .productImage2 { display:block; margin-left:8px; }


        #viewShopping .product { position:relative; width:320px; padding:20px; margin:0px; height:430px; /*border:2px solid var(--headerRed); border-radius:8px;*/ border-bottom:1px solid #ddd; text-align:center; }
        #viewShopping .product .divProductImage { height:260px; display:flex; align-items:center; justify-content:center; }
            #viewShopping .product .divProductImage img { max-height:100%; max-width:100%; }
            #viewShopping .productImage2 { display:none; }
            #viewShopping .product .divProductFeat { font-weight:bold; }
            #viewShopping .product .divProductDesc { color:#777;}
        #viewShopping .product .divProductOptions { width:100%; position:absolute; top:345px; left:0; text-align:center; }
            #viewShopping .product .divProductOptions select { font-size:.9em; width:260px; }
        #viewShopping .product .divProductAddToCart { width:100%; position:absolute; top:380px; left:0; text-align:center; }
            #viewShopping .product .divProductAddToCart input[type=number] { width:50px; text-align:center; font-size:1.0em; }
            #viewShopping .product .divProductAddToCart input[type=button] { background-color:var(--headerRed); border:0; padding:8px 40px; color:white; font-size:1.0em; }
        #viewShopping .productsMessage { margin:100px 0; font-size:2em; }

#viewProduct { text-align:center; }
    #viewProduct .product { }


#viewCart { max-width:1200px; }
    #viewCart .shippingTableHolder h2 { text-align:center; color:var(--headerRed); font-weight:bold; }
    .shippingTableHolder > div { margin:10px 1em; }
    /*#viewCart .shippingTable { width:94%; }*/
        /*#viewCart .shippingTable td:first-child { text-align:right; }
        #viewCart .shippingTable td { padding:3px 6px; }*/

    #viewCart .cartItem { display:flex; justify-content:space-between; align-items:stretch; border:3px solid #ddd; border-radius:10px; padding:8px 6px; margin:10px 0; font-size:.7em; }
    #viewCart .cartItem input[type=number] { width:48px; text-align:center; font-size:1.0em; }
        #viewCart .cartItemDetails { flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
        #viewCart .cartItem img { max-width:100px; max-height:100px; }

    #viewCart .cartBottom { font-size:1.1em; text-align:right; }
    #viewCart .cartBottom span { font-weight:bold; }

#viewAbout { max-width:1200px; font-size:1.1em; line-height:1.2; margin:40px auto; }
    #viewAbout img { max-width:100%; }
    #viewAbout .hr { background-color:var(--headerRed); height:5px; margin:20px 0; }
    #viewAbout .header { font-size:1.1em; font-weight:bold; text-align:center; margin: 16px 0; }
    #viewAbout .bullets { display:flex; flex-wrap:wrap; justify-content:space-between; color:var(--headerRed); font-weight:bold; }
        #viewAbout .bullets div { width:250px; padding:0 10px; }
        #viewAbout .bullets ul { font-size:.9em; color:black; font-weight:normal; margin:6px 0 6px 20px; }
    
#viewTerms { line-height:1.2em; }

#viewOrderCompleted .message { font-size:1.3em; line-height:1.3em; position:relative; top:26%; left:5%; width:85%; padding:20px; border-radius:10px; background-color:rgba(255,255,255,.7); }
            #viewOrderCompleted .messageHeader { color:var(--headerRed); }

#viewSpecialRequests { margin-top:0px; }
    #viewSpecialRequests .requestsBackground { width:100%; height:800px; margin:0px auto 0 auto; position:relative; background-size:cover; background-position:center; background-image:url(../images/SpecialRequests.jpg); background-repeat:no-repeat; background-position-y:-60px; background-position-x:-260px }
        #viewSpecialRequests .requestsText { text-align:center; font-size:1.3em; line-height:1.3em; position:relative; top:15%; left:5%; width:85%; padding:20px; border-radius:10px; background-color:rgba(255,255,255,.75); }
            #viewSpecialRequests .requestsHeader { color:var(--headerRed); font-size:1.9em; }
            #viewSpecialRequests .requestsText a { font-size:1.9em; }

.basicFormLayout { padding:80px 2%; width:100%; }
    .basicFormLayoutBackground { width:100%; height:800px; margin:0px auto 0 auto; position:relative; background-size:cover; background-color:#b2c1d4; background-position:center; background-image:none; background-repeat:no-repeat;  }

#viewContact { max-width:1600px; }
    #viewContact p { font-size:1.2em; }
    .contactUsBackground {  }
    .contactUsMessage { height:100px; }
    .contactUsButton { text-align:right; }

#view404 { }
    #view404 div { text-align:center; padding:60px; font-size:3em; }


/* Supplies */
#viewSuppliesLanding { margin:50px 0; font-size:1.3em; text-align:center; }

#viewSupplies { margin:30px 10px; }
    #divSuppliesFilters { margin:10px 0; }
    #divSuppliesProducts { width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; }
        .divSuppliesProduct { height:340px; width:250px; padding:10px; border:1px solid gray; margin-bottom:15px; border-radius:8px; cursor:pointer; background-color:white; overflow:hidden; }
            .suppliesProductImage { text-align:center; }
                .suppliesProductImage img { max-width:100%; }
            .suppliesProductsFeat { font-size:1.1em; }

#viewSuppliesHighlightedProduct { }
    #viewSuppliesHighlightedProduct button { border-radius:1000px; font-size:1.5em; background-color:red !important; color:transparent; }

    .suppliesBackLink { font-size:1.4em; margin-left:100px; }
    .viewSuppliesHighlightedProductCarousel { width:100%; max-width:512px; margin:20px auto; text-align:center; display:flex; align-items:center; justify-content:center; }
        .viewSuppliesHighlightedProductCarousel div { width:100%; text-align:center; }
        .viewSuppliesHighlightedProductCarousel img { display:inline; }
    .suppliesHighlightedProductsFeat { font-size:1.4em; text-align:center; }
    .suppliesHighlightedProductsDesc { font-size:1.2em; text-align:center; }
    .suppliesHighlightedProductsSize { font-size:1.2em; text-align:center; }
    .suppliesHighlightedProductsAddl { font-size:1em; text-align:center; }
    .suppliesHighlightedProductsCode { font-size:1.3em; text-align:center; }
            

/* Smaller Screens (Bootstrap Small) */
@media only screen and (min-width: 576px) {
    header { height:75px; }
        header .logo { margin:5px 6px; height:65px; }
        
        /*header > nav { font-size:1.0em; line-height:24px; }*/
            
            header .navSeperator { display:inline; }
            header .navBreak { display:none; }
            header .headerCartIcon { height:26px; }
        header a { margin:0 8px; }

    footer {}

    #viewHome { }
        .homeCategory { flex-direction: row; }
            .homeBlock { width:23%; }
                .homeBlockImage { }
                .homeBlockText { font-size:.9em; }
                    .homeBlockText h3 { font-size:1.2em; }

    #divHomeContact a { font-size:1.4em; }

    #viewShopLanding > div { width:40%; }

    #viewShopping .deptButton { padding:4px 2px; font-size:1em; }
    #viewShopping .product .divProductOptions select { font-size:1.1em; }
    #viewShopping .product .divProductAddToCart input[type=number] { font-size:1.2em; }
    #viewShopping .product .divProductAddToCart input[type=number] { font-size:1.2em; }

    #viewCart .cartItem { padding:10px 20px; font-size:1em; }
    #viewCart .cartItem img { max-width:150px; max-height:150px; }
    #viewCart .cartItemDetails { flex-direction:row; justify-content:space-around;  }
    #viewCart .cartItem input { font-size:1em; }

    #viewSpecialRequests .requestsBackground { height:800px; background-position-x:unset; }
}

/* Desktop (Bootstrap Medium) */
@media only screen and (min-width: 768px) {
    header { height:90px; }
        header .logo { margin:5px 20px; height:80px; }
       
        /*header > nav { font-size:1.3em; line-height:28px; white-space:nowrap; }*/
        header .input-group { display:inline-flex; max-width:170px; } /* bootstrap override */
            header > nav img { height:30px; }
        header a { margin:0 15px; }




    #viewCart .shippingTableHolder { display:flex; }
        #viewCart .shippingTableHolder > div { width:48%; }

    #viewSpecialRequests .requestsText { top:26%; left:55%; width:40%; background-color:rgba(255,255,255,0); }

    #viewAbout .bullets { flex-wrap:nowrap; }

    .basicFormLayout { width:50%; }
    .contactUsBackground { background-image:url(../images/ContactUsBackground.jpg); }
    .profileBackground { background-image:url(../images/ProfileBackground.jpg) !important; }
    .emailBackground { background-image:url(../images/EmailBackground.jpg) !important; }
    .passwordBackground { background-image:url(../images/PasswordBackground.jpg) !important; }
}

/* wide exceptions (Bootstrap Large) */
@media only screen and (min-width: 992px) {
    header .headerUserName { max-width:200px; margin:0 2px; }
    /*header > nav { width:auto; }*/
    

    /*.navbar-nav { background-color:transparent; color:black; }
            .navbar-nav a:link, .navbar-nav a:link, header a:link, header a:visited { text-decoration:none; position:relative; color:black !important; }*/
    
    .headerCartIcon { filter:brightness(0) saturate(100%) }
    .navbar-text { color:#777 !important; }

    .headerBonusLinks { height:40px; }
        .headerBonusLinks .dropdown { display:block; }

        .headerBonusSubNav { background-color:var(--headerRed); }
    
}