/*                                                amerimark_hawk.css */
/*                                                                   */
/* Description: site specific styles                                 */
/*                                                                   */
/* REQ1400003.2 - msc 08/05/14 - Copied file from timeforme and      */
/*                               personalized for this site          */
/* REQ1400003 - mjw 08/13/14 - Overwrite leftmenu color to be        */
/*                             amerimark blue instead of TFM pink.   */
/* Req1400002.2.0 11/11/14 ram - modify for new framework            */
/* Req1640110 -ans 12/14/16 - clearance was price                    */
/* REQ1890009 06/12/18 jlg - Bootstrap 4.1.0 updates                 */
/* REQ1890009 06/18/19 jlg - Fix for pricing overlap                 */
/* REQ1830038 08/08/18 jlg - Fix for cutting off certain product names */
/* REQ1840094 01/31/19 jlg - Amerimark V2 upgrades                   */
/* REQ1840094 02/05/19 jlg - Change font size for number of products */
/* REQ1840094 02/06/19 jlg - Fix landing page spacing                */
/* REQ1940036 06/04/19 jlg - Add in new HS landing pages             */
/* REQ1990001 06/20/19 jlg - Rewrite CSS rules                       */
/* REQ1940064 07/01/19 cvc- Change color of H1 tag on landing pages  */
/* REQ1940067 07/18/19 jlg - Add in featured products for category widgets */
/* Req2001000 01/19/21 rlk - responsive design                       */
/* Req2001000 01/21/21 rlk - responsive design                       */
/* Req2001000 02/02/21 rlk - responsive design                       */
/* REQ2140021 04/06/21 rlk - filter/sort change for mobile           */
/* REQ2140083 10/12/21 rlk - site cleanup                           */
/* Req2200001 07/06/22 rlk - moving styling to site specific file */

#content .sitebody .grid_12 .hawkitemlistHolder .itemList .grid_3 .itemWrapper.hawk-itemWrapper .itemTitle > a:hover,
a.moreColorsLink,
a.itembrowseLink:hover,
.itemWrapper.hawk-itemWrapper .itemTitle > a:hover,
a.moreColorsLink:hover, 
.seo-breadcrumb-container a:hover, 
a.breadCrumbLnk:hover,
.hawkWidgets h1,
.hawkCustom h1 {
   color: #194F9D;
}
/* Important because HS has an important on it */
li.hawkFacet-active >a span.hawk-selectionInner {
   color: #194F9D !important;
}
.hawk-listingControls .hawk-pagination .hawk-paging span.hawk-pageActive {
   background-color: #194F9D;
}
/* https://codepen.io/sosuke/pen/Pjoqqp - convert hex to filter 
 * (be sure to prepend with brightness(0) saturate(100%) to convert color to black before changing)
 */
#hawkResults .mainContentContainer .facetContainer .facetName .facetNamePlus {
   filter: brightness(0) saturate(100%) invert(100%) sepia(15%) saturate(7263%) hue-rotate(310deg) brightness(105%) contrast(84%);
}
#altTabContainer{
    text-align: center;
    background-color: #f3f3f3;
    margin: 5%;
    padding: 7%;
    width: 80%;
    margin: 5% auto;
    border-radius: 12px;
    box-shadow: 1px 3px #cecccc;
}
#altTabContainer #altProductImage {
   display: flex;
   margin: 0 auto;
}
#altTabContainer #altTabTitle {
    color: #2962b3;
    font-weight: 900;
    font-size: 120%;
    margin-bottom: -8px;
    display: block;
}
#altTabLink:hover {
   text-decoration: none;
}
#hawkResults .mainContentContainer #altTabContainer #altTabImage {
   width: auto;
   vertical-align: middle;
}
html body #hawkResults .mainContentContainer .filterByHeader {
   background: #1951a0;
}
html body #hawkResults .mainContentContainer #sortContainer,
html body #hawkResults .mainContentContainer #sortContainer select,
html body #hawkResults .mainContentContainer .filterModalContainer .applyButton {
   background-color: #1951a0;
   color: #fefefe;
}
html body #hawkResults .mainContentContainer #sortContainer select {
   font-family: "ralewayregular", Arial, Helvetica, sans-serif;
}
html body #hawkResults .mainContentContainer .filterModalContainer .seeMoreLink {
   font-size: 16px;
   padding: 10px;
   font-weight: bold;
   margin-left: 2%;
}
html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer.shoe_size .facetContent .facetSizeLabel {
      border:1px solid #1951a0;
}
html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer.shoe_size .facetContent .facetSizeLabelSelected {
   background-color: #1951a0;
   color: #fff;
}

/* Tablet-portrait (and larger)
 * Tablet-landscape (and larger) 
 * Laptops (and larger)
 */
@media (min-width: 750px),
(min-width: 992px),
(min-width: 1200px) {
   html body #hawkResults .mainContentContainer .filterByHeader {
      background: none;
   }
   html body #hawkResults .mainContentContainer #sortContainer {
      background: none;
   }
   html body #hawkResults .mainContentContainer #sortContainer select{
      color: #222122;
   }
   html body #altTabContainer {
      padding: 3%;
      width: 60%;
   }
   html body #hawkResults #altTabContainer {
      width: 80%;
   }
   html body #altTabContainer #altTabImage {
      position: relative;
      top: 8px;
   }
   html body #hawkResults #altTabContainer #altTabImage {
      top: 0;
   }
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer,
   html body #hawkResults #mainContentContainer .moreFiltersWrapper .facetContainer,
   html body #hawkResults #mainContentContainer .facetMainContainer .shoe_size .facetContent .facetCheckboxLabel,
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer.active,
   html body #hawkResults #mainContentContainer #itemsPerPageContainer .itemsPerPageOption.itemsPerPageOptionSelected {
      background-color:#194F9D;
      color:#fff;
      border:1px solid #fff;
   }
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer {
      border-top: 1px solid #194F9D;
      border-bottom: 1px solid #194F9D;
   }
   html body #hawkResults #mainContentContainer .moreFiltersContainer,
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer .facetContent,
   html body #hawkResults #mainContentContainer .moreFiltersWrapper .facetContainer .facetContent {
      border:1px solid #194F9D;
   }
   html body #hawkResults #mainContentContainer .moreFiltersContainer .facetName,
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer.active {
      color:#222122;
   }
   html body #hawkResults #mainContentContainer .selectionWrapper #sortContainer #sort {
      border:1px solid #222122;
   }
   html body #hawkResults h1 {
      color:#222122;
   }
   html body #hawkResults .leftNavContainer .subCatContainer {
      text-transform:none;
   }
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer.active .facetName,
   html body #hawkResults #mainContentContainer #itemsPerPageContainer .itemsPerPageOption.itemsPerPageOptionSelected {
      color:#fff;
   }
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer .facetName .facetNamePlus,
   html body #hawkResults #mainContentContainer .moreFiltersWrapper .facetContainer .facetName .facetNamePlus {
      background-image: url(/images/empreview/responsive/arrowDown.svg);
   }
   html body #hawkResults #mainContentContainer .facetMainContainer .facetContainer .facetName .facetNameX,
   html body #hawkResults #mainContentContainer .moreFiltersContainer .facetName .facetNameX,
   html body #hawkResults #mainContentContainer .moreFiltersContainer .facetName .facetNamePlus {
      background-image: url(/images/empreview/responsive/whiteArrowActive.svg);
      filter: brightness(0) saturate(100%);
   }
   html body #hawkResults .leftNavContainer .subCatContainer .leftNavSub .subCatPlus {
      background-image: url(/images/empreview/responsive/mobileMenuPlus.svg);
      filter: brightness(0) saturate(100%);
   }
   html body #hawkResults .leftNavContainer .subCatContainer .leftNavSub .subCatX {
      background-image: url(/images/empreview/responsive/mobileMenuX.svg);
      filter: brightness(0) saturate(100%);
   }
   html body #hawkResults .mainContentContainer .facetContainer .facetName .facetNamePlus {
      filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
   }
}