/* 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; align-items:flex-end; justify-content:center; 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; }

   

.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;*/ } 
    #homeSuppliesLink { font-size:2em; text-align:center; margin:30px 0 40px 0; }
    #homeFlexbox { background-color:white; padding:16px; display:flex; flex-direction:row; max-width:1200px; margin:0 auto 40px auto; border-radius:10px; box-shadow: 8px 8px 12px 8px rgba(0, 0, 0, 0.4);  }
        #homeImgOldPhotos { }
        #homeFlex2 { margin-left:20px; }
            #homePdfNav { float:left; }
            #homeLogo { float:right; }
                #homeLogo img { max-width:300px; }
        
            #homeCopy { font-size:1.5em; }
                #homeCopy p { margin-top:1.2em; margin-bottom:1.2em; }
            #homeCopyright { color:#aaa }

#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; }

#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; }

    .suppliesReport { border:1px solid black; background-color:white; }
        .suppliesReport td { border:1px solid black; vertical-align:top; }

#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 .input-group { display:inline-flex; max-width:170px; } /* bootstrap override */
            header > nav img { height:30px; }
        header a { margin:0 15px; }

    #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; }
    

    .navbar-text { color:#777 !important; }

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

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