
/****************************************************************************************
********************************* TABLE OF CONTENTS ************************************/
/****************************************************************************************

  CUSTOM COLOR THEME 
  CUSTOM FONTS
  GLOBAL 
  LOGIN
  PROFILE
  DIVISIONS
  SHIPTRACK
  CATALOG
  IMPRINT
  SHIP MAIL EDELIVER

****************************************************************************************/

/*************************** CUSTOM COLOR THEME ******************************/

:root {
/* fastsigns blue*/
--fastsigns-blue: rgb(0, 121, 193);

/* static site icon link color */
--links-fa-color: #000000;
--links-fa-color-hover: #666666;

/* site background header color */
--header-bkgd-color: #FFF;

/* static site text link color */
--links-txt-color: #000000;
--links-txt-color-hover: rgb(0, 121, 193);

/* tab blurb text color */
--tab-blurb-text-color: #000000;

}

/****************************************************************************************
*********************************** CUSTOM FONT(S) **************************************
****************************************************************************************/

:root {
--custom-font: 'Lato', sans-serif;
}

/****************************************************************************************
**************************************** GLOBAL *****************************************
****************************************************************************************/

/*** profile and basket icon color ***/
.fa-shopping-basket, .fa-user {
    color: var(--links-fa-color);
}
.fa-shopping-basket:hover, .fa-user:hover {
    color: var(--links-fa-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;
}


/*--------- HEADER -----------*/

/* Header wrapper background color */
#header-wrapper, #header_logo {
  background-color: var(--fastsigns-blue);
}

.custom-name-display {display: none;}
.bread-crumbs p {font-size: 17px !important; font-weight: 700;}


/*------------ LINKS -----------*/
a {
    color: var(--links-txt-color);
}

a:hover,
a:focus,
a:link,
a:visited {
    color: var(--links-txt-color-hover);
}


/*--------- FOOTER -----------*/
.footer {padding-top: 0px;}

.cat_footer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--fastsigns-blue);
    text-align: left !important;
    display: flex;
    flex-direction: column;
    margin-top: 150px; /* New */
}

.footer_column_1, .footer_column_2 { 
  padding: 40px 0;
  margin-left: 20px; /* New */
}

.footer_column_title {
  font-size: 17px;
  color: #FFF;
}

.footer_parag {
  margin-top: 16px;
  font-size: 14px;
  color: #FFF;
  width: 90%;
  line-height: 1.5em;
}

.footer_column_1 a, .footer_column_2 a{color: #fff;}
.footer_column_1 a:hover, .footer_column_2 a:hover {color: #a1cfff;}

.disclaimer-footer {padding: 30px 0;}
.disclaimer-footer p a { color: var(--fastsigns-blue; text-decoration: none;}
.disclaimer-footer p a:hover { color: #da2128;}


/**************************************/
/********DEEP LINKS 2018********/
/*************************************/
 
 /*Image hover*/
 .deep_links img:hover {
    box-shadow: 0 20px 38px rgba(0,0,0,.16)!important;
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transition-duration: .45s;
}

#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;
}


/******************************** SLIDER *********************************/

/* THIS SECTION IS FOR THE SLIDER, IF YOU NEED MORE SLIDERS, THIS NEEDS TO BE UPDATED WITH PROPER PRECENTAGES */

  @keyframes slideshow {
    17% {left: 0;}
    33% {left: 0;}
    49% {left: -100%;}
    65% {left: -100%;}
    82% {left: -200%;}
    98% {left: -200%;}
  }

  .slider {
      overflow: hidden;
      margin: 5px auto;
      position: relative;
      top: -85px;
      z-index: -10;
  }

  .slider .figure img{width:20%;
    float:left;
  }

  .slider .figure {
    position: relative;
    width:500%;
    margin:0;left:0;
    text-align:left;
    animation:25s slideshow infinite; 
    }

  @media screen and (max-width: 767px) {.slider {overflow: hidden; width: 100%; margin: 0 auto;}}

/****************************************************************************************
************************************** DIVISIONS ****************************************
****************************************************************************************/

/* INCREASED LINE HEIGHT FROM 1 TO 2 BETWEEN DIVISIONS */
.corp_divisions li {
    line-height: 2 !important;
}

/****************************************************************************************
***************************************** 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%;
}
