/****************************************************************************************
**************************** ~~-- lnf-standard-2019 --~~ ********************************
********************************* TABLE OF CONTENTS ************************************/
/****************************************************************************************

  1. CUSTOM COLOR THEME
  2. CUSTOM FONT(S)
  3. GLOBAL
  4. CATALOG
  5. IMPRINT


  - If you are making changes here, changes may need to be made in 
  the Site Header > Additional CSS Content.

*****************************************************************************************
*****************************************************************************************
*****************************************************************************************
****************************************************************************************/

/****************************************************************************************
***This code can be edited by a site builder to influence the site for mobile devices.***
***If you are making changes here, you may want to make changes to the additional CSS****
***Content field in the Site Header of the menu.*****************************************
****************************************************************************************/


/****************************************************************************************
******************************** 1. CUSTOM COLOR THEME **********************************
****************************************************************************************/

:root {

/* site background header color */
--header-bkgd-color: #0c62a8;
--header-link-bkgd-color: #E5E5E5;

/* Catalog tab hover over */
--catalog-tab-bar-color: #000000;
--catalog-tab-bar-color2: #FFFFFF;

/* static site text link color */
--links-txt-color: #000000;
--links-txt-color-hover: #0c62a8;

/* tab blurb text color */
--tab-blurb-text-color: #000000;

}

/****************************************************************************************
******************************* END CUSTOM COLOR THEME **********************************
****************************************************************************************/



/****************************************************************************************
******************************** 2. CUSTOM FONT(S) **************************************
****************************************************************************************/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

:root {
--custom-font: 'Open Sans', sans-serif;
}

/****************************************************************************************
******************************** END CUSTOM FONT(S) *************************************
****************************************************************************************/



/****************************************************************************************
************************************* 3. GLOBAL *****************************************
****************************************************************************************/

body, .ic-msg {
  font-family: var(--custom-font);
}
.responsive-longname, .note {
  font-family: var(--custom-font);
}
.responsive-longname {
  font-weight: bold !important;
}

/*** Make Button Bold ***/
.button {
  font-weight: bold;
}

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

/* Header wrapper background color */
#header-wrapper {
  background-color: var(--header-bkgd-color);
}


/*------------ LINKS -----------*/
a {
    color: var(--links-txt-color);
}

a:hover,
a:focus,
a:link,
a:visited {
    color: var(--links-txt-color-hover);
}

/* Mobile Header Bar */
/*
#red_header_bar{
  padding-bottom: 2%;
  background-color: #B51F5A;
  border-bottom: 1px solid #4A4A4A;
}
*/


/**************************************/
/********DEEP LINKS 2018********/
/*************************************/
 
/*Image gray then fade to color when hover*/
 .deep_links img {
   filter: grayscale(100%);
   transition: all 0.5s ease;
}
 .deep_links img:hover {
   filter: grayscale(0%);
}

/*Code to control the wrapping of content*/
 
/*this is used for having more than 4 icons with this current build,
may need to be adjusteded depending on desired content - Restricts
width so wrap happens at sets of 4 icons*/
#deep_link_container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
}
 
/*Set width to 100% for maximum number of icons showing on screen at smaller screens*/
@media only screen and (max-width: 945px) {
  #deep_link_container{
    max-width: 100%;
  }
}
 
/**adds space between icons as they wrap**/
.deep_links_holder{
  margin: 10px;
  width: 250px;
}
 
/*Used to Center single row of icons on small screens*/
@media only screen and (max-width: 368px) {
  #deep_link_container{
    justify-content: center;
  }
}


/*Keeps Main copy container center*/
#newscopy-wrapper{
  justify-content: center;
  margin: 0 auto;
}

.ind_txt{
  font-family: var(--custom-font);
  font-size: 24px;
  font-weight: 600;
  color: var(--tab-blurb-text-color);
  padding: 10px 0 0 0;
  text-align: center;
  margin: 0 auto !important;
}

.ind_para {
  font-family: var(--custom-font);
  color: var(--tab-blurb-text-color);
  margin: 0 !important;
}

/*************************************/
/*******END CODE 2018**********/
/*************************************/




/****************************************************************************************
********************************** END GLOBAL *******************************************
****************************************************************************************/


/****************************************************************************************
************************************** 4. CATALOG ***************************************
****************************************************************************************/


/* Buttons */
.select-items #navTabs,
.select-items #navTabs:focus,
.select-items #navTabs:active,
.select-items #navTabs:hover,
#header-wrapper a#mobile_cart,
#header-wrapper a#mobile_cart:focus,
#header-wrapper a#mobile_cart:active,
#header-wrapper a#mobile_cart:hover,
#header-wrapper ul#mobile_xtra_links,
#header-wrapper ul#mobile_xtra_links:focus,
#header-wrapper ul#mobile_xtra_links:active,
#header-wrapper ul#mobile_xtra_links:hover,
#tab_responsive_tabs i#mobile_tab_closer,
#tab_responsive_tabs i#mobile_tab_closer:focus,
#tab_responsive_tabs i#mobile_tab_closer:active,
#tab_responsive_tabs i#mobile_tab_closer:hover,
#item_details_view span#mobile_link_closer,
#item_details_view span#mobile_link_closer:focus,
#item_details_view span#mobile_link_closer:active,
#item_details_view span#mobile_link_closer:hover,
.responsive_tabs-shell #submit_catalog_search,
.responsive_tabs-shell #submit_catalog_search:focus,
.responsive_tabs-shell #submit_catalog_search:active,
.responsive_tabs-shell #submit_catalog_search:hover,
.detail_closer {
    color: black;
}

/* mobile cart item circle */
.item_count {
    border-color: black;
}


/* Catalog tab hover over */
.responsive_tabs div.off dfn:hover {
    background-color: var(--catalog-tab-bar-color);
    color: var(--catalog-tab-bar-color2) !important;
}
.responsive_tabs div.on dfn:hover {
    background-color: var(--catalog-tab-bar-color);
    color: var(--catalog-tab-bar-color2) !important;
}


/*----- Catalog Thumbnails: gray to color  -----*/
/*
#all_items_view .image-container img {
   filter: grayscale(100%);
   transition: all 0.5s ease;
}
#all_items_view .image-container img:hover {
   filter: grayscale(0%);
}
*/

/****************************************************************************************
************************************ END CATALOG ****************************************
****************************************************************************************/



/****************************************************************************************
************************************** 5. IMPRINT ***************************************
****************************************************************************************/

/* Side By Side buttons for showing and hiding form */
#mobile_form_show,
#mobile_form_show:focus,
#mobile_form_show:active,
#mobile_form_show:hover,
#mobile_form_hide:focus,
#mobile_form_hide:active,
#mobile_form_hide:hover,
#mobile_form_hide {
    color: black;
    background: lightgray;
    box-shadow: 2px 3px 4px #666;
}

/*Make X in tab popout not touch the tabs themselves*/
.select-items .responsive_tabs div.off,
.select-items .responsive_tabs div.on {
    max-width: 80%;
}

/****************************************************************************************
************************************ END IMPRINT ****************************************
****************************************************************************************/