/****************************************************************************************
************************************ PROSERVICES ****************************************
********************************* TABLE OF CONTENTS ************************************/
/****************************************************************************************

  CUSTOM COLOR THEME 
  CUSTOM FONTS
  GLOBAL 
  CATALOG
  IMPRINT
  SHIPPING


  - 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.*****************************************
****************************************************************************************/




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

:root {
/* static site text link color */
--links-txt-color: #FFF;
--links-txt-color-hover: #CCCCCC;



/* site background header color */
--header-bkgd-color: #FFFFFF;
--header-link-bkgd-color: #FFFFFF;

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

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

}



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

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

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



/****************************************************************************************
**************************************** GLOBAL *****************************************
****************************************************************************************/
/*** Color Variables ***/

/*** profile icon and basket: hover ***/
.fa-shopping-basket, .fa-user {
    color: var(--links-txt-color);
}
.fa-shopping-basket:hover, .fa-user:hover {
    color: var(--links-txt-color-hover);
}

/*** Catalog Preview - fit mobile ***/
#lightbox-container-image-box {
    width: 90% !important;
    margin: 0 auto !important;
    height: auto !important;
}
#lightbox-container-image-box img {
    width: 100% !important;
}
#lightbox-container-image-data-box{
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/*** INDEX HEADER ***/
#header_logo {
    background-image: url(../img/home-hero-background.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
}

/*** WELCOME TEXT ***/
.welcome_hdr_txt {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin: 40px 0;
}

.subtitle_opt_txt{
  font-size: 26px;
}


/*** WELCOME BUTTONS ***/
.subtitle_opt_txt{
  font-size: 24px;
}
.welcome_choose {
  font-weight: 400 !important;
}
.welcome-buttons {
  width: 90% !important;
}




/* links */
a {
    color: #2199E8;
}

a:hover,
a:focus,
a:link,
a:visited {
    color: #1585CF;
}

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


/****************************************************************************************
***************************************** 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;
}


/****************************************************************************************
***************************************** 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%;
}

/****************************************************************************************
**************************************** SHIPPING ***************************************
****************************************************************************************/
#billing-info > tbody > tr:nth-child(2) > td.label{
  text-align: left;
}