/* RESPONSIVE HEADER STYLING */

/* OUTER RESPONSIVE HEADER container */
header {
   display: flex;
   flex-direction: row;
   justify-content: center;
   min-width: inherit; /* inherit from body */
   font-size: 14px;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

header a { color: #002855; }
header li a { color: #002855; }

/* ADA compliance */
header ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #545454;
  opacity: 1; /* Firefox */
}

header :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #545454;
}

header ::-ms-input-placeholder { /* Microsoft Edge */
  color: #545454;
}

.box {
   width: 100%;
   max-width: 1280px;  /* per business (thomopsonas, overriding watersb 100% */
   min-width: inherit; /* inherit from body */
   display: flex;
   justify-content: space-between; 
   flex-wrap: wrap;
   flex-direction: row;
   align-items:center;
   padding-bottom:2px;
   position:fixed;
/* position:-ms-page; /* IE11 "fix" - didn't work */
   top:0px;
   z-index:100;
/* SET a background color here
 * If NO background image, then the background sets off the header from the rest of the body
 * IF Using a background image ...
 * Use a background to block page content bleed-through on scroll due to image opacity
 */
/* background-color:#F2F2F2; /*  SUBTLE difference from body background */
/* background-color:#C0E6FD; /*  baby powder blue - very BAMish */
/* background-color:#C1C2C3; /*  silvery gray - requires #navCartText {color:white} and .my-cart-icon {color:#002855} */
/* background-color:white;   /*  MATCH the page background if header image in use below */ 
}
.box { color: #002855; background: #FFF; }
.box a:hover, .box a:focus {
   text-decoration: none;
   outline: none;
}
.box:after {
   content : "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
/*
   background-image: url('/images/header/holidays/winter-banner.png'); 
   background-image: url('/images/header/holidays/easter-banner.jpg');
*/
   background-size:contain; /* cover or contain - see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
   width: 100%;
   height: 100%;
   opacity : 0.25; /* .25 - .50 */ /* .25 for winter, .40 for easter */
   z-index: -1;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}
.box i { font-size: 28px; }

/* INNER RESPONSIVE HEADER containers */
.rffh-primary, .rffh-search { 
   display: flex;
   align-items: center;
}
.rffh-secondary, .rffh-tertiary { display: flex; justify-content: space-between; }
.rffh-primary, .rffh-tertiary, .rffh-search { margin: 5px auto; }

.rffh-rowbreak { display:flex; align-items:center; margin-left: 10px; } /* (desktop default) single row - add space before this header element */
.rffh-search   { padding-left: 10px; }
.rffh-remove   { text-align: center; font-size: small; }  /* container subject to removal per space availability */
.rffh-search   { flex-grow: 2; }                          /* expand search when space is available */
.rffh-full     { flex-basis: 100vw; }                     /* expand this element to full width */
.header-violator { 
   display: flex; 
   flex-basis:100vw; 
   flex-grow: 1;
   height:30px;
   align-items: center;
   margin-left: -3px;
   margin-bottom: -2px;
   color: #002855;
}

.rffh-primary.header-violator {
   background: #002855; 
   margin-top: 0px; 
}



/* CATEGORY NAV container */
#category-nav { display: none; margin-left: 10px; }
#category-nav > a i { display: flex; color: #A4A4A4; }
#category-nav > a:hover, #category-nav > a:focus,
#category-nav > a:hover i, #category-nav > a:focus i {
   color: #789BAB; 
   outline: none;
/* background: #000024; */
}
.nav.accordian { 
   position: absolute;
   z-index: 101;
   min-width: 150px;
   border-radius: 0px 0px 8px 8px;
   border: solid 1px #757575;
   border-top: 2px solid #FFF;
   left: 0;
   background: #FAFAFA;
   color: #002855;
}

/* header menu container offset for desktop */
.nav.accordian { top: 95px; }

/* Allow dialogs and container which might need it to be vertically scrollable, but remove the scrollbar */
.nav.accordian,
#store-info-container,
.account-container-wrapper,
.ui-dialog {
   overflow-x: hidden;
   overflow-y: auto;
   max-height: calc(100vh - 90px);
   background: #FAFAFA;
   scrollbar-width: none;
}

/* (re-sizeable) BAM! LOGO */
.header-logo {
   display:flex;
   align-items:center;
}


/* DEV / QA host information */
.dev-message {
   line-height: .9em;
   margin-left: 6px;
   color: #f88; 
}


/* SET, REVIEW, CHANGE -MY STORE- container */
.my-store, .set_store {
   display: flex;
   align-items: center; /* vertical */
   line-height: 1em;
}

/* hover & focus styling for: Store Finder / Set My Store / Change My Store */
.set_store a:hover, .set_store a:focus,
.set_store a:hover i, .set_store a:focus i,
a.store-set:hover, a.store-set:focus,
#viewSelectedStore:hover, #viewSelectedStore:focus {
   color: #789BAB; 
   outline: none;
}

/* vertical pixel offset for material icons + space between header elements */
.my-store i {
   margin-top: 4px;
}
.setStoreText {
    margin-top: -8px;
    padding-left: 4px;
    font-size: 110%;
}

.store-pickup-info { white-space: nowrap; }
.store-pickup-details { display: flex; align-items: center; white-space: nowrap; margin-left: 15px; }
.store-pickup-details:hover div, .store-pickup-details:hover span, 
.store-pickup-details:focus div, .store-pickup-details:focus span { color: #002855; }
.store-pickup-name, .store-pickup-hours { font-size: 1.1em; color: #4E738A; }
.store-pickup-hours::before {
    content: '|';
    padding: 0 5px;
    color: #CCC;
    font-weight: bold;
}
/* Show selected store details or change store */
#store-locator2 {
   margin-top: 0px;
   margin-left: 15px;
   position: absolute;
   top: 60px;               /* header menu container offset for desktop */
   display: flex;
   align-items: center;     /* h center */
   justify-content: center; /* v center */
   z-index: 102;            /* the battle continues */
}

.store-finder, #account-nav span, .my-cart a {
   display: flex;
   align-items: center;
}
.store-finder { padding-left: 10px; }

/* Show help plus links as horizontal list */
.header-help-links { direction: rtl; }
.help-plus { 
	display: inline-block;
	text-wrap-mode: nowrap;
}
li.help-plus a { color: #626262; } /* gray - meets ADA contrast requirement */
.help-plus a:hover, .help-plus a:focus { color: #002855; }
#search-zip2 {
   margin-left: 3px;
   padding-left: 5px;
   box-sizing: border-box;
   height: 32px;
   border: 1px solid #d1d2d4;
   color: #000;
   width: 120px;
   text-align: center;
   font-size: 16px; /* < 16px cause zoom on mobile safari */
}

/* header menu container offset for store info */
#store-info-container {
   position: absolute;
   padding: 7px;
   text-align: center;
   background: #FAFAFA;
   color: #212121;
   top: 70px; 
   margin-left: 15px;
}

#store-info-container > #selectedStoreImageDiv {
    min-width: 130px;
    max-width: 200px;
    padding: 5px;
    margin: auto;
}

#store-info-container > #selectedStoreImageDiv img {
   width:100%;
}
#store-info-container #selectedStoreImageDiv + div { float: none !important; margin: auto; }

.changeStoreButton {
   height: 26px;
   position: relative;
   width: 120px;
   background-color: #002855;
   color: #FAFAFA;
   border-radius: 8px;
   padding: 5px;
   box-sizing: content-box;
   text-align: center;
   border: 1px solid #FAFAFA;
   margin-top: 5px;
   cursor: pointer;
   margin-left: auto;
   margin-right: auto;
}

.changeStoreButton > .changeStoreBtnText {
   display: inline-block;
   height: 100%;
   vertical-align: text-bottom; /* text-bottom aligns to middle, middle aligns to bottom */
   font-size: 12px;
}

.changeStoreButton > .changeStoreIcon {
   display: inline-block;
   height: 100%;
   vertical-align: baseline;
}
.changeStoreButton:hover, .changeStoreButton:focus {
   background: #789BAB;
}

.header-env { white-space: nowrap; }
.header-env { padding: 0px 12px; }

/* violator text ticker 2 - 9 */
div[class^="header-ticker"] {
   overflow: hidden;
   -webkit-user-select: none;
   margin: auto;  
   padding: 0px 10px;
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   height: 30px;
} 

/* Ensure images beside text, h+v centered */
div[class^="header-ticker"] ul li { 
   display: flex;
   align-items: center;
   justify-content: center;
   list-style: none;
   text-align: center;
   margin-bottom: 0px;
   line-height: 1.1em;
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   height: 30px;
   font-size: 1.1em;
}
div[class^="header-ticker"] ul li { color: #002855; }
div[class^="header-ticker"] ul li img { max-height:30px; }
div[class^="header-ticker"] ul li a, div[class^="header-ticker"] ul li {
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
   /* ensure vertical align of img and text within href */
   display: flex;
   align-items: center;
}

div[class^="header-ticker"] ul:hover { animation-play-state: paused }
div[class^="header-ticker"] span:hover+ul { animation-play-state: paused }

#search_help2 {
   background-color: #002855;
   width: 32px;
   height: 32px;
   position: relative;
   display: inline-block;
}




/* (EXPANDABLE) SEARCH (filter)*/
.search-filter {
   align-items: center;
   display:none;
   outline: none; /* no outline required for ADA - focus / hover change displayed */
}
.search-wrapper {
   display: flex;
   height: 28px;
   width: inherit;
   background: #FAFAFA;
   border-radius: 8px;
   outline: none; /* no outline required for ADA - focus / hover change displayed */
}
.search-wrapper { border: solid 1px #535353; border-radius: 50px; }
.search-field { width: calc(100% - 10px); padding-left: 25px; height: 40px;}
.search-form { width: inherit; }
#query {
   width: inherit;
   font-size: 15px;
   color: #212121;
   text-align: center;
   border: none; /* allow filter to merge seamlessly */
   background: #FAFAFA;
   border-radius: 8px;
   outline: none; /* no outline required for ADA - focus / hover change displayed */
   padding-left: 10px; /* so that placeholder text doesn't shift on focus */
}
#query {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='300px'><text x='5%' y='20' fill='gray' font-size='17' font-family='arial'>Enter Title, ISBN or Author</text></svg>");
   background-repeat: no-repeat;
}
/* left align query text when typing, lines up with auto-complete */
#query:focus { text-align: left; background-image: none; } 
#query:hover, #query:focus {
   color: #789BAB;
   padding-left: 10px; /* separate entered text from product type selector */
   outline: none; /* no outline required for ADA - focus / hover change displayed */
}
#query { border-radius: 50px; }

/* Hide the background image placeholder when the search query field is not blank */
#query:not([value=""]) { background-image: none; }

#searchIcon {
   display: flex;
   align-items: center;
/* z-index: 101; /* displays OVER modals, why was this needed? */
   color: #002855;
   margin-left: -51px;
}
#searchIcon > i {
   font-size: 28px;
   position:absolute;
   cursor:pointer; 
   color: #002855;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
}
#searchIcon > i {
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   width: 33px;
}
#searchIcon > i:hover, #searchIcon > i:focus {
   color: #789BAB; 
   background: #000024;
}
#filter-toggle {
    display: flex;
    align-items: center;
    color: #002855;
    background-color: rgb(0,0,0,0.2);
    border-radius: 50px 0 0 50px;
    height: 40px;
    padding: 0 5px;
    position: absolute;
    left: 138px;
    vertical-align: baseline;
}
#filter-toggle:hover, #filter-toggle:focus, #filter-toggle > i:hover, #filter-toggle > i:focus {
   outline: none; /* no outline required for ADA - focus / hover change displayed */
}
#filter {
   font-size: 15px;
   color: #212121;
   margin-left: 5px;
   /* Merge filter selector seamlessly into #query */
   border: none;
   -moz-appearance: none;    /* for Firefox */
   -webkit-appearance: none; /* for Chrome */
   border-right: 1px solid #002855;
   padding-right: 5px; /* offset used when entering filter text */
   outline: none; /* no outline required for ADA - focus / hover change displayed */
}
/* For IE10 */
#filter::-ms-expand {
  display: none;
}
#filter:hover, #filter:focus, #filter> i:hover, #filter> i:focus {
   color: #789BAB; 
}

/* The container must be positioned relative: */
.box.search-expanded .search-filter {
   display: flex;
   margin-left: 35px;
}
.select-selected {
   background-color: DodgerBlue;
}
/* Style the arrow inside the select element: */
.select-selected:after {
   position: absolute;
   content: "";
   top: 12px;
   right: 10px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-color: #fff transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
   border-color: transparent transparent #fff transparent;
   top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
   color: #212121;
   padding: 8px 15px;
   border: 1px solid transparent;
   border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
   cursor: pointer;
}
/* Style items (options): */
.select-items {
   position: absolute;
   background-color: DodgerBlue;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
   display: none;
}
.select-items div:hover, .same-as-selected {
   background-color: rgba(0, 0, 0, 0.1);
}

/* Store Finder */
/* EXCELLENT - more IE6-8 override required via !important */
.store-finder:hover, .store-finder:focus, .store-finder > i:hover, .store-finder > i:focus { color: #789BAB !important; outline: none; }


/* MY (CUSTOMER, MEMBER) ACCOUNT, SIGN IN */
#account-nav {
   margin-top: -2px;
   margin-left: 10px;
   cursor: pointer;
   outline: none;
}
#account-nav { color: #002855; margin: auto 10px;}
#account-nav span:hover, #account-nav span:focus, #account-nav:hover i, #account-nav:focus i{
   color: #789BAB; 
}

/* header menu container offset for desktop */
.account-container-wrapper {
   position:absolute; 
   top: 48px;  
   right: 10px;
}
.account-container-wrapper { top: 115px;  border-radius: 5px; }
#account-container { white-space: nowrap; }
#account-container .customer-account a {
   font-size: smaller;
   color: #002855;
   background-color: #FAFAFA;
   margin: -4px -5px 7px -5px;
   padding: 3px;
   max-width: 140px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
#account-container li { text-align: right; }


/* CART (link) + CART ITEM COUNT */
.my-cart {
   display:flex; 
   align-items:center;
   margin-right: 10px;
}
.my-cart a {
   outline: none;
}
.my-cart-icon {
   display: flex;
   position: relative;
}
.my-cart-icon { color: #002855; }
.empty-cart  { display: none; }

a:hover .cart-icon-label, a:focus .cart-icon-label, a:hover .my-cart-icon > i, a:focus .my-cart-icon > i {
   color: #789BAB; 
}

#navCartText {
   top: 20%;
   left: 75%;
   transform: translate(-50%,-50%);
   position: absolute;
   font: 14px Arial, sans-serif;
   min-width: 50%;
   padding: 4px;
}


/* (common) HEADER MENU container definitions */
.header-menu ul{
   list-style:none;
}
.header-menu-container ul li a {
   display:block;         /* enable hover styling for full container width */
}
.header-menu-container ul li a:hover,
.header-menu-container ul li a:focus {
   color: #789BAB;
   outline: none;
}
.header-menu-container {
   padding: 5px;
   border-radius: 0px 0px 5px 5px;
   position: relative;
   border: solid 1px #757575;
   border-top: solid 1px #FFF;
   display: inherit;
   z-index: 101;
   background: #FAFAFA;
   color: #002855;
}


/* (common - currently unused) AFTER icon definition */
.arrow-down:after {
    font-family: 'Material Icons';
    font-size:28px;
    content: 'arrow_drop_down';
    vertical-align:text-bottom;
    -webkit-font-feature-settings: 'liga' 1;
    -moz-font-feature-settings: 'liga' 1;
    font-feature-settings: 'liga' 1;
    right: .2em;
    position: relative;
}

/* Styling for the category navigation bar - displayed only for viewports > 700px */
#category-bar {
    display:flex;
/*  justify-content: space-around; restore if vertical bar padding resolved */
    justify-content: center; /* visually resolves category | category padding issue */
    align-items: center;     /* vertical center */
    background: #FFF;
    max-width: 1280px;
    margin: auto;
}
#category-bar {
    border-top: 2px solid #7997AB;
    width: calc(100vw - 50px);
    margin: 5px auto;
    margin-top: 20px;
}

#category-bar > li { margin-top: .5em; display: inline-block; text-decoration: none; }

/* Bold UPPERcase for nav-bar categories */
#category-bar > li a span.category { text-transform: uppercase; font-weight: bold; }

/* contains the topics (and links) of a given category */
.category-bar-topic {
    width: calc(100vw - 50px);
    justify-content: space-between; /* prevents outer padding on large displays */
    border: 0px #535353 solid; /* this grey is the leftmost grey across from #002855 in the chrome color picker */
    border-bottom-width: 15px;
    border-top-width: 2px;     /* use 5px top border if a lighter border color is chosen */
}
.category-bar-topic li {
    padding: 0px 5px;
    list-style: none;
}
.category-bar-topic li h3 { font-weight: bold; font-size: 14px; margin-top:10px; }

.flex-list {
    position: relative; /* MUST COMMENT/remove if #category-bar li:hover .category-bar-topic position is absolute */
    overflow: hidden;
}
ul.flex-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* use equidistant spacing not stretched*/
/*  justify-content: space-between; /* stretch out - but - divider / category spacing not centered correctly */
    margin-left: -1px;
    max-height: 2em; /* comment to allow multi-line nav bar */
}
.flex-list > li:not(:first-child) { border-left: 1px solid #ccc; }

/* header-help-links is an RTL ordered flex-list, so don't prepend border-left for the LAST, not FIRST child */
.header-help-links .flex-list > li { border-left: none; }
.header-help-links .flex-list li:not(:first-child) { border-right: 1px solid #ccc; } 
.header-help-links .flex-list { justify-content: start; }

.flex-list li {
/*  flex-grow: 1;     * stretch category-bar elements full width - contents not horizontally centered */
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 calc(1em + 5px);
}

/* styling for the topic container each category-bar category */
#category-bar .category-bar-topic {
/** display: none; /* if CSS-ONLY HIDE each topic until the parent LI receives hover/focus */
    display: flex; /* JS version - set base display, hide using the hidden class below */
    background: #FFFFFA;
    max-width: 1280px;
    left: 1vw;
    right: 1vw;
    /* Alternative approach - instead of "full" width ...
     * Left-side topics base off of active catgory, and don't overflow (not true)
     * Adjust rightmost nav-bar topics against the right side of the viewport
     * #category-bar li:nth-last-child(n+5):hover .category-bar-topic { left: 2em; }
     * #category-bar li:nth-last-child(-n+5):hover .category-bar-topic { right: 2em; }
     * requires media handling for widths > 1280px
     */
}
#category-bar .category-bar-topic {
    width: calc(100vw - 50px);
    margin: 0 auto;
}

/* Support delayed display of category-topics on hover using JS via removal of this class after delay */
/* This is messy in that it involves JS, but is a better user experience, and display does not currently (2020)
 * allow for transition handling which would allow this to be solved solely in CSS without involving JS */
#category-bar .category-bar-topic.hidden {
    display: none !important; /* when removed, display reverts to its base value of flex above */
}

/* emphasize the selected category - display as a tab */
#category-bar > li:hover > a,
#category-bar > li > a:focus {
    background: #535353;        /* show this topic as selected */
    color: #FFF;
    text-decoration: none;      /* no underline for this link */
    border-radius: 5px 5px 0 0; /* round the top for a tab-like appearance */
    padding: 3px;               /* increase the "tab" background size */
    outline: none;
}

/* Reveal the topics of the hovered category */
/* FOCUS not supported, topic display worked but not navigation */
/* FOCUS could be supportable if we DROP the JS based delay */
#category-bar li:hover .category-bar-topic {
/** display: flex;       /* if CSS ONLY - Override the default display:none to reveal this div */
    z-index: 99;         /* uggh - buttons and openX ads (10) peek above without layer adjustment */
    position: fixed;
/*  position: absolute; ** see note in .flex-list position: attribute **/
}

/* Remove monetization icon from category nav-bar/menu item - per business request*/
#category-bar >li > a.info-you-saved:before,
#category-nav >li > a.info-you-saved:before { content: ''; }

/* SWAP foreground and background for you-saved class usage in nav-bar */
#category-bar > li:hover > a.info-you-saved:hover:before, 
#category-bar > li:hover > a.info-you-saved:hover,
#category-bar > li > a.info-you-saved:focus:before,
#category-bar > li > a.info-you-saved:focus {
    color: #FFF;
    background: #B50000;
}

/* default topic column styling */
#category-bar .topic-column { background: #FFF }

/* "extra / openX ad topic column styling */
#category-bar .topic-column.extra { max-width: 250px; border-left: #535353 solid 2px }
#category-bar .topic-column.extra li h3, 
#category-bar .topic-column.extra li span { display: flex; justify-content: center; text-align: center; }
#category-bar .topic-column.extra img { margin-top: 10px; margin-bottom: 5px; max-width: 200px; }

/* END category-bar navigation 
 * ******************************************
 * ******************************************
*/




@viewport {
  width: device-width ;
  zoom: 1.0 ;
}
@-ms-viewport {
  width: device-width ;
}

/* ####################################################
 * LARGE DEVICE FORM FACTORs
 * ####################################################
 *
 * SEARCH COLLAPSED
 + --------------------------------------------------------------+
 | [logo][store] [violator] [ .....search.... ] [account] [cart] |
 + --------------------------------------------------------------+
 *
 * SEARCH EXPANDED
 + ------------------------------------------------------------------------+
 | [logo][store] [violator] [ .....search.... ][filter] x [account] [cart] |
 + ------------------------------------------------------------------------+
 *
 *
 */

/* UGLY fix for IE11 position:fixed issue */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  header { left: 0; transition: all .5s; }
  header .box { left:0px; }
  #searchIcon { margin-top: -27px; }
}
@media screen and (-ms-high-contrast: active) and (min-width: 1281px), (-ms-high-contrast: none) and (min-width: 1281px) {
  header .box { left: calc((100% - 1280px)/2); }
}
@media screen and (-ms-high-contrast: active) and (max-width: 840px), (-ms-high-contrast: none) and (max-width: 840px) {
  #searchIcon { margin-top: -28px; }
}

@media (min-width: 1281px) {
   /* keep the category-bar h-centered above 1280px */
   #category-bar .category-bar-topic { left: calc((100% - 1280px)/2); }
   #category-bar .category-bar-topic { right: calc((100% - 1280px)/2); }
   /* non-"full" width approach
    * Adjust rightmost nav-bar topics against the right side of the viewport *
    * #category-bar li:nth-last-child(n+5):hover .category-bar-topic { left: calc((100% - 1280px)/2); }
    * #category-bar li:nth-last-child(-n+5):hover .category-bar-topic { right: calc((100% - 1280px)/2); }
    */
}

@media (max-width: 1039px) {
   .box .rffh-remove { display: none; }
   /* TODO - need a hover styled NON-FULL logo as well, with replacement here */
}

/* >= 800px?  allow header (.box) to expand with the viewport, expand search and violator (if present) */
@media (min-width: 800px) {
   .box:not(.search-expanded) .rffh-remove { flex-grow: 1.5; }
   .box.search-expanded .rffh-remove { flex-grow: 0.5; }
}

/* > 950px? adjust search icon for different #query font size */
/*@media (min-width: 950px) { */
@media (min-width: 950px) {
   #logo { padding-left: 15px; }
   #logo:hover, #logo:focus { outline: none; }
}

/* < 950px? HIDE violator, reduce search text size */
@media (max-width: 949px) {
   #logo  { padding-left: 7px; } /* match full-size logo left padding */
}



/* ####################################################
 * NOT a LARGE DEVICE? 
 * ####################################################
 * Display the header using 2 rows
 *
 * SEARCH COLLAPSED
 + -----------------------------------+
 | [logo] [ .... search .... ] [cart] |
 | [....store....]          [account] |
 + -----------------------------------+
 *
 * SEARCH EXPANDED
 + -----------------------------------+
 | [ ........search.......][filter] x |
 | [....store....]          [account] |
 + -----------------------------------+
 */

/* *************************************************************** *
 * MEDIUM DEVICE FORM FACTORs - correctly supports up to 849px     *
 *
 * use a 2 row header for devices UP TO 850px
 * expanding the 2nd row filler space for proper element layout */
@media (max-width: 1284px) {
   .box .rffh-secondary { order: 1; }
   .box .rffh-rowbreak  { flex-basis: 70%; margin-left: 7px; } /* FORCE wrap, adjust leading space */
   .box .rffh-search    { flex-grow: 2; }
   .box .rffh-filler.rffh-secondary { flex-grow: 2; }

   /* place the storefinder and help-plus links at bottom */
   .box .rffh-tertiary  { order: 10; } 

   /* hide filler after help-plus link */
   .box .rffh-filler.rffh-tertiary  { display: none; }

   /* minimal left offset since not 100% width */
   .nav.accordian, #store-locator2 { left: 2px; }
   .nav.accordian { margin-left: 20px; }

   /* header menu container offset for two-row header (tablet and smaller) */
   #account-container { padding: 0 15px; }

   div[class^="header-ticker"] ul li a,
   div[class^="header-ticker"] ul li { font-size: 1em; } /* reduce ticker font size */

   /* SHOW the small-ish viewport category menu icon */
   #category-nav { display: initial; }

   /* AND ... hide the category navigation bar for smaller viewports */
   #category-bar { display: none; }

   /* re-order the header elements for smaller viewports - tab index will be in disarray */
   .rh-category-nav { order: 1 }
   .rh-storefinder  { order: 2 }
   .rh-logo { order: 3 }
   .rh-profile { order: 4 }
   .rh-cart { order: 5 }
   .rffh-search { order: 6; flex-basis: 90vw; margin-left:15px; margin-right: 25px; }

   /* And ... adjust a few margins given this new order ... */
   .my-store, .set-store { margin-left: 20px; }
   .header-help-links    { margin-right: 15px; }
   .rffh-search          { margin-right: 30px; }

   /* And adjust the fixed position header margin offset */
   header                { height: 130px; }

   /* adjust top margin for header menus */
   #store-locator2,
   #store-info-container { top: 164px; } 
   .nav.accordian, 
   .account-container-wrapper { top: 50px!important; }

   #filter-toggle {display:none;}
}


@media (max-width: 750px) {
   /* larger store name for this viewport size, truncated if needed */
   .store-pickup-info { max-width: 72vw; } /* maximum width at medium font at minimum (340px) width */
   .store-pickup-name { 
       white-space: nowrap;
       font-size: large;
       font-size: medium;
       overflow-x: hidden;
       overflow-y: hidden;
       text-overflow: ellipsis;
   }
}
@media (min-width: 701px) {
   /* Adjust the keyframe end-point transition height per # of elements */
   /* margin offset animation failed on Mac OS browsers using em, switched to px */
   @keyframes ticker2st { to { margin-top: -60px; } }
   @keyframes ticker3st { to { margin-top: -90px; } }
   @keyframes ticker4st { to { margin-top: -120px; } }
   @keyframes ticker5st { to { margin-top: -150px; } }
   @keyframes ticker6st { to { margin-top: -180px; } }
   @keyframes ticker7st { to { margin-top: -210px; } }
   @keyframes ticker8st { to { margin-top: -240px; } }
   @keyframes ticker9st { to { margin-top: -270px; } }

   .account-container-wrapper { right: auto; }
}

@media (max-width: 700px) {
   /* expand these containers to full-width */
   .header-menu-container { border-radius: 0px; }
   .nav.accordian,
   #store-info-container,
   .account-container-wrapper { 
      width: 100%; 
      overflow-y: auto;
      overflow-x: hidden;
      max-height: calc(100vh - 90px); /* -90px based on real-world testing */
      right: 0px;
      margin-left: 0;
   }

   /* adjust top margin for header */
   #store-locator2,
   #store-info-container { top: 164px; }
   .nav.accordian, 
   .account-container-wrapper { top: 90px; }
/*
   ::-webkit-scrollbar { display: initial; }
   scrollbar-width: initial;
*/

   /* remove left offset for 100% wide store info */
   #store-info-container      { left: 0; margin-left:0; }

   /* hide store finder, sign-in, and cart labels */
   .store-finder span { display: none; }
   #account-nav span .sign-in { display: none; }
   .cart-icon-label { display: none; }

   /* Up to this size, hide optional help-plus links */
   .help-plus.optional { display: none; }

   /* and increase profile menu font size on SMALL devices */
   #account-container         { font-size: large; padding: 0 15px;}

   /* and allow the (authenticated) customer id (email address) to expand up to this media's max-width */
   #account-container .customer-account a { max-width: 700px; }

/* Allow 2 line height (35px) for smaller devices */
/* margin offset animation failed on Mac OS browsers using em, switched to px */
   div[class^="header-ticker"] { height: 35px; font-size: small; }
   div[class^="header-ticker"] ul li { height: 35px; }
   .header-violator { display: flex; flex-basis:100vw; height:35px; }

   /* and adjust the keyframe end-point transition height per # of elements */
   @keyframes ticker2st { to { margin-top: -70px; } }
   @keyframes ticker3st { to { margin-top: -105px; } }
   @keyframes ticker4st { to { margin-top: -140px; } }
   @keyframes ticker5st { to { margin-top: -175px; } }

   @keyframes ticker6st { to { margin-top: -210px; } }
   @keyframes ticker7st { to { margin-top: -245px; } }
   @keyframes ticker8st { to { margin-top: -280px; } }
   @keyframes ticker9st { to { margin-top: -315px; } }

   /* And adjust fixed position header margin offset */
   header.v1           { margin-top: calc(90px + 35px); }
}


/* *************************************************************** *
 * SMALL(ish) DEVICE FORM FACTORs - correctly supports 340 - 500px *
 *
 * < 500px? Hide logo & cart when search expanded */
@media (max-width: 500px) {
   .box #filter-toggle, .box #filter { display: none; }
 
   #query:active, #query:hover, #query:focus,
   #search-zip2:active, #search-zip2:hover, #search-zip2:focus { font-size: 16px !important; }

   /* Up to this size, hide help-plus, expand store info */
   div.rffh-tertiary.rffh-full {
	flex-direction: column;
   }
   .header-help-links .flex-list {
	justify-content: end;
	margin-left: 17px;
   }
   .store-pickup-info { max-width: 90vw; }
}

/* < 449px? reduce search text font size, store info font size and line-height */
@media (max-width: 449px) {
   #viewSelectedStore { font-size: smaller; line-height: 1.2em; }
   .v1 .store-pickup-info { max-width: 70vw; }

   /* Adjust search-wrapper font size for smaller displays */
   .search-field { width: -moz-available; }
   .search-wrapper { height: 22px; }
   #searchIcon > i { font-size: 22px; margin-left: 5px; }
   #query { font-size: 14px; }
   #query {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='5%' y='15' fill='gray' font-size='15' font-family='arial'>Search ...</text></svg>");
      background-repeat: no-repeat;
   }

   /* Hide env for to make room for any violator messaging */
   .header-env { display: none; }

}

.tk-fairwater-script, .tk-fairwater-script > span {
	text-transform: lowercase!important;
	line-height: 0;
	font-size: 18px;
	font-weight: bold;
	color: #244b5a;
}

li:hover > a > span.category > span.tk-fairwater-script,
li:hover > a > span.category > span.tk-fairwater-script > span,
li > a:focus > span.category > span.tk-fairwater-script,
li > a:focus > span.category > span.tk-fairwater-script > span {
	color: white;
	font-weight: 300;
}

.tk-fairwater-script .alt-a {
	-moz-font-feature-settings: "ss16";
	-webkit-font-feature-settings: "ss16";
	font-feature-settings: "ss16";
	text-transform: uppercase!important;
}

.tk-fairwater-script .alt-g {
	-moz-font-feature-settings: "ss04";
	-webkit-font-feature-settings: "ss04";
	font-feature-settings: "ss04";
}

.tk-fairwater-script .alt-h {
	-moz-font-feature-settings: "ss05";
	-webkit-font-feature-settings: "ss05";
	font-feature-settings: "ss05";
}

.cio-submit-btn {
	background-color: #002855;
	color: white;
	padding: 0 15px;
	border-radius: 0 50px 50px 0;
	position: absolute!important;
	right: -35px!important;
	top: -5px!important;
	height: 40px;
}
.cio-submit-btn:hover{
	background-color:white;
	color:#002855
}
.cio-clear-btn {margin-right:15px;}