/* WARNING: THIS 'layout.css' FILE IS USED BY ALL WEBSITES; USE CAUTION WHEN EDITING, AS CHANGES WILL AFFECT ALL WEBSITES */
 /* Last edited 9/15/25 2:46pm */


* {
     box-sizing: border-box;
}

:root {

 /* THIS GROUP OF VARIABLES DEFINE SOME VARIOUS WIDTHS AND HEIGHTS */
     --featurebanner-width: 80%; /* was 75%, prior was 72% changed 3-31-23 */
     --quicknav_menu_width: "800px";
     --brandlogos-div-width: 8%;
     --brand-filter-logo-height: 5vw;  /* was 74px */
     --brand-filter-logo-height-min: 54px;
     --tool-tile-div-max-width: 234px;
     --tool-tile-div-width: 24%; /* was 33% */
     --tool-tile-div-min-width: 110px;  /* was 98 */
     --tool-type-image-tile-width: 96%;
     --tilewidth: 305px;  /* was 315px */
     --tileheight: 250px;  /* was 200px */
     --blankrow-height: 0.4vw;
     --unvrsl_tbl_width: 95%; /* universal table width for shared tool tables */
     --tbl_width_rockbits: 100%; /* h-thread, rope, taper bits. was 80% */
     --tbl_width_plugbits: 100%; /* plug bits. was 80% */
     --tbl_width_c9plugbits: 100%; /* C9 plug bits. was 80% */
     --tbl_width_rbbits: 100%;
     --tbl_width_hammers: 100%; /* chipping hammers. */
     --tbl_width_acc1col: 84%; /* 7/8 or 1" (1 column of part numbers). was 70% */
     --tbl_width_acc2col: 87%; /* 7/8 and 1", OR 1-1/8 and 1-1/4 (2 columns). was 80% */
     --tbl_width_acc3col: 90%; /* 1, 1-1/8 and 1/1-4 (3 columns). was 90% */
     --tbl_width_acc4col: 100%; /* 7/8, 1", 1-1/8 and 1-1/4 (4 columns). was 95% */


     /* THIS GROUP OF VARIABLES DEFINE FONT-SIZES */
     --fontsizepage-headerh1: 3vw; /* for the universal page header */
     --fontsizepage-headerh3: 0.95vw;
     --fontsizepage-headerh4: 0.9vw;
     --fontsizepage-headerh4-800: 1.2vw;
     --fontsizesearch-container: 13px;
     --fontsizesearchform: 13px;
     --fontsizesearchinput: 13px;
     --fontsizepopup: 13px;
     --fontsizenavitems: 13px;
     --fontsizesidenavquicknav: 18px; /* for the universal Quicknav side-bar */
     --fontsizesidenavbutton: 14px;
     --fontsizeheadertitle: 1.33vw; /* for the universal Brands side-bar */
     --fontsizeprefooter: 1.24vw;
     --fontsizefooternav: 1vw; /* for the universal page footer */
     --fontsizefooterVOA: 1.2vw;
     --fontsizefooterwww800email: 1vw;
     --fontsizefooterCopyright: 0.9vw;
     --fontsizefooterSitedesign: 0.9vw;
     --fontsizeYouAreViewing: 1.8vw; /* for the main section of all pages */
     --fontsizecontactboxesh3: 1.3vw; /* for the main section of particular pages */
     --fontsizecontactboxesp: 1.1vw;
     --fontsizepartcategoriesul-h2: 1.5vw;
     --fontsizeselectbyweight: 1.4vw;
     --fontsizeShowcaseTitle: 20px;
     --fontsizeShowcaseTitleBase: 15;
     --fontsizeShowcaseListDetails: 13px;
     --fontsizeProdPageToolBrand: 2.2vw;
     --fontsizeProdPageToolModel: 1.8vw;
     --fontsizeProdPageToolType: 1.5vw;
     --fontsizeProdPageDetailDescription: 1.13vw;
     --fontsizeProdPageTable: 1.07vw;
     --fontsizeProdPageBestPriceCallAway: 1.6vw;
     --fontsizeProdPageLargePhoneNumber: 1.6vw;
     --fontsizeProdPageShowPrices: 0.8vw;
     --fontsizeYouWillAlsoNeed: 1.07vw;
     --fontsizetablink: 1.2vw; /* for the tabbed sections of all tool pages */
     --fontsizetabcontentheader: 1vw;
     --fontsizetabcontent: 1.2vw;
     --fontsizetabcontentsmfont: 0.8vw;
     --fontsizewarntablehdr: 1vw;
     --fontsizewarntabledata: 0.9vw;
     --fontsizetablehdrlrg: 0.9vw;
     --fontsizetabledatalrg: 1vw;
     --fontsizetablehdr: 1.1vw;
     --fontsizetabledata: 1vw;
     --fontsizetableheaderlonger: 1.6vw;
     --fontsizetablecouplerhdrlrg: 1.8vw;
     --fontsizetablecouplerhdr: 1.2vw;
     --fontsizetaperrodstablelarge: 2.5vw; /* was 3vw */
     --fontsizetaperrodstablesmall: 1vw;
     --fontsizewarningtext: 1.5vw;


     /* THIS GROUP OF VARIABLES DEFINE COLORS */
     --page-background: aquamarine;  /* #88fbb5, #e6e49d, #88fbca, #b4fff1, #88fbca, #ff8c46, #b3a982, #dfd498, 2e8981, #f2dbbe, #e1d5c5, #ddd2c3 */
     --page-header-h1: black;
     --page-header-h3: black;
     --page-header-bckgrd-color: yellow;  /* was yellow and rgba(255,255,0,0.9)  */
     --dark-brown: #575655;
     --box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.4);
     --tab-shadow: 2px -2px 2px rgba(0,0,0,0.7);
     --box-shadow-bybrandhover: 0px 0px 8px 8px white; /* was 0px 0px 8px 4px #df00ff */
     --universaltextshadowtextcolor: 0.05em 0.05em 0.01em black, -0.01em -0.02em 0.01em black, 0.1em 0.1em 0.1em gray;  /* for a color text color */
     --universaltextshadowtextblack: 0.07em 0.05em 0.05em #aaa;  /* for a black text color */
     --popuptext-color: white;
     --popuptext-background: #535353;
     --popupspan-shadow: 1px 1px 0.1em black; /* was 1px 1px 2px black, 0 0 1em var(--page-background), 0 0 0.2em darkblue */
     --popuptext-shadow: 2px 2px 1px black, 0 0 1em var(--page-background), 0 0 0.2em darkblue;
     --navitems-bkgrnd: #6fa2ff; /* cornflowerblue */
     --navitems-bkgrnd-hover:  orange;  /* #E87A04 */
     --prodpage: white;
     --prodpagealsoneed: #f2def2;
     --prodpagealsoneedtextshadow: 1px 1px 0.1px white, -0.5px -0.5px 0.1em white, 2px 2px 0.2em gray;
     --tile_background: white;
     --showcasetitle-color: orangered;  /* #ff9e64 or rgb(255,102,0) */
     --showcasetext-color: #000000;
     --tabletopdisplay-color: #FFFFFF;
     --table-accytool-bkgrnd-color: #FFFFFF;
     --table-accytool-custom-color: orange;
     --tableimage-color: #FFFFFF;
     --tablebkgrd-color: #B3CBBD;
     --tableheader-color: #575655;
     --tableheader2-color: #FFCC00;
     --tableheadertext-color: gray;
     --tableheadertextshadow: 1px 1px 0.1px black, -0.5px -0.5px 1px darkgray, 2px 2px 3px black;
     --tableheaderlonger-color: gold;
     --tablehdrlongershadow: black 1px 1px 0.1em, black -0.5px -0.5px 0.1em, white 1px 1px 2px;
     --table1stcol-color: #FED;
     --table2ndcol-color: #EDC;
     --table3rdcol-color: #DCCEC0;
     --table4thcol-color: #EDC;
     --table5thcol-color: #CCB;
     --table6thcol-color: #BBBBBB;
     --table7thcol-color: #EEEEEE;
     --table8thcol-color: #C6D3E0;
     --table9thcol-color: #D6D6D6;
     --table-1stpn-col-color: #7F9;    /* 7/8 x 3-1/4 */
     --table-2ndpn-col-color: #FF9;    /* 7/8 x 4-1/4 */
     --table-3rdpn-col-color: #EBF;    /* 1 x 4-1/4 */
     --table-4thpn-col-color: #BDF;    /* 1-1-8 x 6 */
     --table-5thpn-col-color: #FED299; /* 1-1/4 x 6 */
     --table-6thpn-col-color: #FF9988; /* C9 - 3/4 */
     --table-7thpn-col-color: #00FFFF; /* RB */
     --table-ch-hs-color: #7F9; /* chipping hammer hex shank color */
     --table-ch-rs-color: #FF9; /* chipping hammer round shank color */
     --table-dimbkgd-color: #DDDDDD; /* dim background color */
     --table-dimtext-color: #AAAAAA; /* dim text color */
     --table-spline-col-color: #EE5599; /* special color for spline - cp0009 */
     --table-1stpn-txt-color: black;
     --table-2ndpn-txt-color: black;
     --table-3rdpn-txt-color: black;
     --table-4thpn-txt-color: black;
     --table-5thpn-txt-color: black;
     --table1strow-color: #FED;
     --table2ndrow-color: #EDC;
     --table3rdrow-color: #DCB;
     --table4throw-color: #CBA;
     --table5throw-color: #C6D3E0;
     --tablerowhighlight-color: #F66;
     --std-tablebkgrnd-color: #F7E7D7;
     --blankrow-color: gray;
     --border-color: #987;
     --border2-color: #CBA;
     --quicknav-title-bkgrnd: orange;
     --quicknav-buttontext-color: white;
     --quicknav-buttontextshadow: 1px 1px 0.1px black, 1px 1px 2px black;
     --quicknav-bkgrnd: orangered;
     --quicknav-bkgrnd-hover: #555555;
     --quicknav-box-shadow: #987;
     --brand-title-bkgrnd: orange;
     --brand-bkgrnd: var(--navitems-bkgrnd);
     --contact-boxes-color: white;
     --partsDivSectionsBkgd-color: #5e5e5e;
     --partsDivSectionsh3-color: yellow;
     --partsDivSectionsh3-text-shadow: 1px 1px 0.1px black, -0.1px -0.1px 0.1px black, 2px 2px 3px gray;
     --partcategories-backgroundcolor: #eaeaea;
     --partcategoriesul-h2-color: #ffdfa5;
     --partcategoriesul-h2-text-shadow: 1px 1px 1px black, 2px 2px 3px gray;
     --prefooternav-text-shadow: 1px 1px 0.01vw black, -0.4px -0.5px 0.01vw goldenrod, 2px 1.5px 0.06vw gray;
     --terms-boxes-color: floralwhite;
     --chisels-boxes-color: floralwhite;
     --tabpg-bkgd-color: white;
     --tabpg-tab-color: orange;
     --tabpg-tabhover-color: #F67;
     --tabpg-onclick-color: violet;
     --tabpg-tabborder-color: #999;
     --tabpg-contentbkgd-color: #EEE;
     --tabpg-contentborder-color: black;  /* was #999 */
     --weight-fillcolor: orange;
     --weight-00-fillcolor: #F60;
     --weight-30-fillcolor: #F34;
     --weight-45-fillcolor: #5F7;
     --weight-60-fillcolor: #0FF;
     --weight-90-fillcolor: #FE4;
     --safety-color: #FFC965;
     --warning-text-shadow: 1.3px 1.3px 0.1px black, -0.5px -0.5px 0.1px black, 2px 2px 3px darkred;
     --pale-orange-color: #FED299;
     --pale-yellow-color: #F6EFD4;
     --pale-blue-color: #A8FFFF;
     --medorange-color: #FFC965;
     --darkorange-color: #F60;
     --violet-color: violet;
     --purple-color: #7F3FBF;
     --diamondblue-color: #1D89F5;
     --brightviolet-color: #DAF;
     --brightred-color: #F34;
     --brightorange-color: orange;
     --brightgreen-color: #5F7;
     --brightblue-color: #0FF;
     --brightyellow-color: #FE4;
     --tilebestprice-color:#E96101;
     --dot-color: #ccc;
     --orange-color: orange;
     --black-color: black;
}


html {
	background-color: lightgray;
	scroll-behavior: smooth;
}

body {
     width: 100%;
     text-align: center;
     font-family: Arial, Verdana, Geneva, sans-serif;
     margin: 0px;
}

a {
    cursor: pointer;
}

.matw-text-align-center {
    text-align: center;
}

mark {
     background-color: yellow;
     padding: 1px 3px;
     font-weight: bold;
}

.flex-container {
     width: 100%;
     height: auto;
     margin: 0px 0px 0px 0px;
     padding: 5px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
}

header {
     padding: 0px;
     margin: 0px;
     width: 100%;
     height: auto;
}
.page-header {
     padding: 0px;
     margin: 0px;
     width: 100%;
     height: auto;
}
.page-header-container {
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
}
.page-header h1{
     font-size: var(--fontsizepage-headerh1);
     font-weight: bold;
     line-height: 1;
     text-align: center;
     letter-spacing: 1.5px;
     margin: 0px;
     padding: 0px;
     color: var(--showcasetitle-color);
     text-decoration-line: none;
     text-shadow: 1px 1px 1px black, -1px -1px 1px white, 2px 2px 4px #111;
}
.page-header h3 {
     font-size: var(--fontsizepage-headerh3);
     font-style: italic;
     text-align: center;
     padding: 0px;
     padding-top: 0.3vw;
     margin: 0px;
     color: black;
     text-shadow: 0.03em 0.03em 1px yellow, 0.05em 0.04em 0.1em black;
}
.page-header h5 {
     display: none;
}
.header-logos {
     width: 15%;
     margin: 5px 0px 0px 0px;
}
.header-logos img {
     width: 100%;
     max-width: 240px;
     height: auto;
}
.header-plus-more {
   position: absolute;
   top: 6.5%; /* was 40px */
   right: 17%;
   z-index: 100;
   width: 14%;
}
.header-filler {
     width: 12%;
     height: 5%;
}
.center-container {
     display: flex; 
     width: 50%; /* was 46 */
     justify-content: center;
     margin-top: 5px;
     margin-bottom: 5px;
}
.center-container ul {
     display: flex; 
     justify-content: center;
     width: 100%;
     padding: 0px;
     margin: 0px;
}
.header-center {
     color: var(--black-color);
     box-shadow: var(--box-shadow);
     height: 7.5vw;
     width: 100%;
     border: 3px solid black;
     display: inline;
     background-color:  #ff7;
     text-align: left;
     margin: 0px 0px 8px 0px;
     padding: 0px;
}
.header-center a.domain {
     text-decoration-line: none;
}
.header-center a.site {
     text-align: center;
}
.header-center-h4 {
     font-size: 1.2vw;
     font-style: italic;
     text-align: center;
     margin: 0px 0px 10px 0px;
     padding: 10px 15px;
     text-decoration-line: none;
     text-shadow: 1px 1px 0.1px black, 1px 1px 1px black;
}
.header-center-h4 span {
     padding: 0px 0.5vw;
     color: darkorange;
     text-decoration-color: darkorange;
     text-decoration-line: underline;
}
.header-center-h4-span1 {
     text-decoration-line: none;
}

/* begin site search text box */
.search {
     overflow: hidden;
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
}
.search .search-container {
     width: 46%;
     height: auto;
     margin: 0px 10px 10px 10px;
     font-size: var(--fontsizesearch-container);
}
.search .searchform {
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     width: 100%;
     height: 25px;
     justify-content: center;
     font-size: var(--fontsizesearchform); 
}
.search input[type=search] {
     font-size: var(--fontsizesearchinput);
     font-style: italic;
     border: 1px solid var(--black-color);
     width: 100%;
     height: 25px;
     box-shadow: var(--box-shadow);
     margin-right: 5px;
     padding: 5px;
}
.search input[type=image] {
     width: 25px;
     height: 25px;
     border: 1px solid black;
     position: relative; left: 0px;
     box-shadow: var(--box-shadow);
}
/* end site search text box */
.popup-phone-link {
     display: none;
     -ms-flex-direction: row;
     flex-direction: row;
     width: 100%;
     height: 25px;
     justify-content: center;
     font-size: var(--fontsizesearchform);
     font-weight: bold;
     margin: 1vw 0px 0px 0px;
     text-shadow: 1px 1px 0.1px black, -1px -1px 1em white, 2px 2px 3px gray;
}
.popup-phone-link a {
     text-decoration-line: none;
}
.popup-phone-link a span {
     color: darkorange;
     text-decoration-line: underline;
     box-shadow: none;
}

/* ------------------------ */

.sticky_navbar {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     min-height: 41px;
     margin: 0px 0px 30px 0px;
     padding: 0px;
     background-color:  #ff7;
     box-shadow: var(--box-shadow);
     border: 1px solid black;
     position: sticky;
     top: 0px;
     z-index: 5;
}
.sticky_pagenav {
     position: sticky;
     width: 100%;
     margin-top: 5px;
     margin-bottom: 5px;
}
.PageNavString {
     display: flex;
     font-size: 13px;
     font-style: italic;
     color: black;
     text-align: left;
     padding: 2px 8px 1px 7px;
     background-color: white;
     width: max-content;
     margin: 0px auto;
     border: 1px solid black;
}
.PageNavString img {
     height: 15px;
     margin-right: 5px;
}

.sizing_container {
     display: none; /* FOR DEVELOPMENT PURPOSES: SET 'display: block'. FOR PRODUCTION SET 'display: none' */
     position: fixed;
     top: 200px;
     padding: 10px;
     z-index: 100;
     background-color: orange;
     border: 1px solid black;
}
.sizing {
     font-size: 11px;
     font-weight: bold;
     width: 100%;
     padding: 3px;
}

/* begin horizontal nav bar */
.navbar {
     display: flex;
     padding: 0px;
     justify-content: center;
     margin: 9px 0px;
     width: 100%;
}
.navbar div {
     display: flex;
     justify-content: center;
     width: fit-content;
}
.navbar a {
     color: white;
     text-decoration: none;
}
.navbar-h2-1 {
     position: absolute;
     left: 1%;
     margin: 0px;
     padding: 0px;
     font-size: 1.8vw;
     text-shadow: 1px 1px 0.1px black, -1px -1px 1em white, 2px 2px 3px gray;
}
.navbar-h2-1 a span {
     color: darkorange;
     text-decoration-line: underline;
     box-shadow: none;
}
.navbar-h2-2 {
     position: absolute;
     right: 20px;
     margin: 0px 5% 0px 0px;
     padding: 0px;
     font-size: 1.8vw;
     text-shadow: 1px 1px 0.1px black, -1px -1px 1em white, 2px 2px 3px gray;
}
.navbar-h2-2 a span {
     color: darkorange;
     text-decoration-line: underline;
     box-shadow: none;
}
.navbar_accssy {
     display: flex; /*  modified in @media declaration at bottom when screen size shrinks */
}
.navbar_contact {
     display: flex; /*  modified in @media declaration at bottom when screen size shrinks */
}
.navitems {
     font-size: 0.9vw;
     font-weight: bold;
     background-color: var(--navitems-bkgrnd);
     padding-left: 14px;
     padding-right: 14px;
     padding-top: 3px;
     padding-bottom: 3px;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
     text-shadow: 0.1em 0.12em 0.1em black; /* was 1px 1px 2px black, 1px 1px 2px black */
}
.navitems:hover {
     font-size: 0.9vw;
     font-weight: bold;
     color: black;
     text-shadow: 2px 2px 2px white, 0 0 0.5em yellow, 0 0 1em white;
     background-color: var(--navitems-bkgrnd-hover);
     padding-left: 14px;
     padding-right: 14px;
     padding-top: 3px;
     padding-bottom: 3px;
     border: 1px solid black;
}

.navbar_cart {
     position: absolute;
     right: 0px;
     top: 0px;
     margin: 0px;
     padding: 0px;
     height: 100%;
     width: 70px;
     min-height: 47px; /* was 39 */
}
.navbar_cart a {
     text-decoration-line: none;
}

.navbar_cart_img {
     height: 100%;
     position: relative; right:0px; top:0px;
     z-index: 9;
}
.navbar_cart_img_anim {
     height: 100%;
     position: relative;
     right:0px; top:0px;
     animation-name: slide-cart;
     animation-duration: 2.3s; 
     animation-iteration-count: 1;
     z-index: 9;
}
@keyframes slide-cart {
  0%  {right:1900px; top:0px;}
  20% {rotate: -30deg;}
  88% {rotate: 10deg;}
  93% {right:-12px; top:0px;}
  100% {right:0px; top:0px;}
}

.cart-count-overlay {
     width: 22px;
     height: 22px;
     border-radius: 11px;
     background-color: cornflowerblue;
     margin: 0px;
     padding: 0px;
     position: absolute; /* was relative */
     top: 10%; /* was -90% */
     left: 33%;
     opacity: 0;
     z-index: 11;
}
.cart-count-overlay-qty {
     color: white;
     font-size: 14px;
     font-weight: bold;
     margin: 0px;
     padding: 0px;
     text-align: center;
     position: relative;
     top: 3px;
}

/* end horizontal nav bar */

/* ------------------------ */

/* define menu icon for small screens. clicking on this icon toggles the '.sidenav-container_toggle' (a duplicate of the '.sidenav-container') */
.quicknav_button {
     display: block;
     width: 32px;
     height: 32px;
     position: absolute;
     align-self: center;
     left: 0px;
     margin: 9px 3px;
     padding: 0px;
     background-color: orange;
     z-index: 10;
     visibility: hidden;
     cursor: pointer;
}
.quicknav_button img {
     width: 100%;
     height: 100%;
     box-shadow: var(--box-shadow);
}

/* ------------------------ */

.sidenav-container_toggle {
     display: none;
     visibility: hidden;
     width: 200px;
     margin-bottom: 30px;
     height: auto;
     position: absolute;
     top: 225px;
     left: 3px;
     z-index: 4;
}

/* ------------------------ */

/* begin side quicknav bar */
.sidenav-container {
     display: flex;
     width: 10%;
     min-width: 200px;
     margin-right: 10px;
     margin-bottom: 30px;
     height: auto;
     justify-content: center;
}
aside.sidenav {
     width: 100%;
     height: auto;
     margin: 0px;
     font-size: var(--fontsizesidenavbutton);
     box-shadow: var(--box-shadow);
     background-color: var(--quicknav-bkgrnd);
     text-shadow: var(--quicknav-buttontextshadow);
   }
   /* for the 'aside.sidenav' table title */
aside.sidenav table.quicknav {
     border: 1px solid black;
     border-bottom: 0px;
     background-color: var( --quicknav-title-bkgrnd);
     font-size: var(--fontsizesidenavquicknav);
     font-weight: bold;
     font-style: italic;
     text-align: center;
     text-decoration-line: underline;
     text-shadow: 2px 2px 2px white, 0 0 0.5em yellow, 0 0 1em white;
     width: 100%;
     height: auto;
     margin: 0px;
     padding: 0px;
     padding-bottom: 2px;
   }
aside.sidenav .button {
     background-color: var(--quicknav-bkgrnd);
     border: 1px solid black;
     border-bottom: 1px solid rgb(0,0,0,0.0);
     color: var(--quicknav-buttontext-color);
     padding: 5px;
     text-align: left;
     text-decoration: none;
     display: inline-block;
     font-weight: bold;
     margin: 0px;
     transition-duration: 0.2s;
     cursor: pointer;
     width: 100%;
     height: auto;
}
aside.sidenav .button:hover {
     background-color: var(--quicknav-bkgrnd-hover);
     border: 1px solid black;
     box-shadow: 0px 0px 8px 4px yellow;
     position: relative;
     z-index: 5;
}
/* these sidenav background colors must match those indicated in the database table 'quick_nav' */
aside.sidenav .button-cornflowerblue {
	background-color: cornflowerblue;
}
aside.sidenav .button-violet {
	background-color: violet;
}
aside.sidenav .button-springgreen {
	background-color: springgreen;
}
aside.sidenav .button-orangered {
	background-color: orangered;
}
aside.sidenav .button-gray {
	background-color: gray;
}
/* last sidenav button gets a bottom border */
aside.sidenav .button-border-bottom {
	border: 1px solid black;
}
/* end side quicknav bar */


/* ------------------------ */

.footer {
     font-weight: bold;
     margin-bottom: 20px;
     padding: 0px;
     width:100%;
}
.footerCerts {
     width: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
}
.footerSiteSeal {
     border: 1px solid black;
     width: 200px;
     height: auto;
     background-color: white;
     margin: 20px;
}
.footerCSS {
     border: none;
     width: 88px;
     height: 31px;
}
.footernav {
     font-size: var(--fontsizefooternav);
     font-weight: bold;
}
.footer-rockdrill {
     margin: 0px;
     padding: 0px;
     width: 50%;
     height: auto;
}
.footer-rockdrill-image {
     width: 100%;
     height: auto;
     padding: 0px;
     box-shadow: var(--box-shadow);
}
.footerVOA {
     color: black;
     font-size: var(--fontsizefooterVOA);
     font-weight: bold;
     margin: 0px;
     padding-top: 1.5vw;
     padding-bottom: 1.5vw;
}
.footer table {
     width: 33%;
     margin-bottom: 2vw;
     color: black;
     font-size: 36px;
     border-style: none;
}
.footer table a {
     color: darkorange;
     text-shadow: 1px 1px 0.1px black, -1px -1px 1em white, 2px 2px 3px gray;
}
.footerAttrb {
     color: black;
     font-size: 1.1vw;
     font-weight: normal;
     font-style:italic;
     margin: 0px 0px 0.5vw 0px;
     padding: 0px;
}
.footerCopy {
     color: black;
     font-size: var(--fontsizefooterCopyright);
     font-weight: normal;
     margin: 0px;
     padding: 0px;
}
.footerCopy sup {
     font-size: var(--fontsizefooterCopyright);
     font-weight: normal;
}
.footerCopy span {
     color: black;
     font-size: var(--fontsizefooterCopyright);
     font-weight: normal;
}
.footerDesign {
     font-size: var(--fontsizefooterSitedesign);
     font-weight: normal;
     color: indigo;
}

/* ------------------------ */

.featurebanner {
     width: var(--featurebanner-width);
     margin: 0px 0px 2% 0px;
     padding: 0px;
     clear: both;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
	 overflow: hidden;
}
.featurebanner_srch {
     text-align: left;
     padding-left: 2vw;
     padding-right: 2vw;
     border: 1px solid gray;
     border-radius: 0.3vw;
     background-color: beige;
}

#emailFormDiv {
     position: absolute;
}


/* ------------------------ */

.brands_container {
     width: var(--brandlogos-div-width);
     margin-left: 10px;
     margin-right: 0px;
}
.brands {
     width: 100%;
     height: auto;
     margin: 0px;
     padding: 0px;
     padding-bottom: 6%;
     background-color: var(--brand-bkgrnd);
     border-style: solid;
     border-color: var(--black-color);
     border-width: 1px;
     box-shadow: var(--box-shadow);
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
}
.brands_href_img {
     margin: 5%;
     padding: 0px;
     max-width: 90%;
     max-height: 78px;
     border: 1px solid black;
     background-color: white;
     box-shadow: var(--box-shadow);
}
.brands_href_img:hover {
     box-shadow: 0px 0px 8px 4px yellow;
}

/* ------------------------ */

.headertitle{
     border-bottom: 1px solid black;
     background-color: var(--brand-title-bkgrnd);
     font-size: var(--fontsizeheadertitle);
     font-weight: bold;
     font-style: italic;
     text-align: center;
     text-decoration-line: underline;
     text-shadow: 2px 2px 2px white, 0 0 0.5em yellow, 0 0 1em white;
     width: 100%;
     height: auto;
     margin: 0px 0px 10% 0px;
     padding: 0px;
     padding-top: 5px;
     padding-bottom: 10px;
}
.YouAreViewing {
     font-size: var(--fontsizeYouAreViewing);
     font-style: italic;
     font-weight: bold;
     width: 100%;
     margin: 0px;
     color: var(--showcasetitle-color);
     text-align: center;
     padding: 0px;
     padding-bottom: 2vw;
     text-shadow: var(--universaltextshadowtextcolor);
}
.YouAreViewing p {
     font-size: var(--fontsizeYouAreViewing);
     font-style: italic;
     font-weight: bold;
     margin: 0px;
     text-align: center;
     padding: 0px;
}
.YouAreViewing hr {
     width: 60%;
}
.YouAreViewingAllTools {
     font-size: 1.5vw;
     font-style: italic;
     font-weight: bold;
     width: 80%;
     margin: 0px;
     color: deepskyblue;
     text-align: center;
     padding: 0px;
     padding-bottom: 0.7vw;
     text-shadow: var(--universaltextshadowtextcolor);
}
.airhose-container {
     width: 80%;
     margin-bottom: 3vw;
}
.air_text {
     font-size: 1vw;
}
.air_h1_1 {
     font-size: 1.8vw;
     font-weight: bold;
     margin-top: 1.3vw;
     margin-bottom: 0px;
     color: orange;
     text-shadow: 0.05em 0.05em 0.01em black, -0.01em -0.02em 0.01em black, 0.1em 0.1em 0.1em gray;
}
.air_h1_2 {
     font-size: 1.8vw;
     font-weight: bold;
     margin-top: 0px;
     margin-bottom: 1.6vw;
     color: orange;
     text-shadow: 0.05em 0.05em 0.01em black, -0.01em -0.02em 0.01em black, 0.1em 0.1em 0.1em gray;
}
.air_h1_3 {
     font-size: 1.3vw;
     font-weight: bold;
     margin-top: 0px;
     margin-bottom: 1.6vw;
     color: cornflowerblue;
     text-shadow: 0.05em 0.05em 0.01em black, -0.01em -0.02em 0.01em black, 0.1em 0.1em 0.1em gray;
}
.airfilter-container {
     width: 80%;
}

.filter-heading {
     font-size: var(--fontsizeselectbyweight);
     font-style: italic;
     font-weight: bold;
     width: 100%;
     margin: 0px 0px 0.5vw 0px;
     color: var(--black-color);
     text-align: center;
     padding: 0px;
}
.selectby {
     font-style: normal;
     text-decoration-line: none;
}
.selectbybranddisplay {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 2vw;
     justify-content: center;
}
.selectbybranddisplaydiv {
     margin: 0.6vw;
     height: var(--brand-filter-logo-height);
     min-height: var(--brand-filter-logo-height-min);
}
.selectbybranddisplaydivimg {
     height: 80%;
     padding: 0px;
     border: 1px solid black;
     background-color: white;
     box-shadow: var(--box-shadow);
}
.selectbybranddisplaydivimg:hover {
     box-shadow: var(--box-shadow-bybrandhover);
}


.Parts {
     width: 90%;
}
.PartCategories {
     font-size: 1vw;
     padding: 0px;
     margin-bottom: 2vw;
     text-align: left;
     list-style-type: none;
     box-shadow: var(--box-shadow);
     width: 100%;
     display: inline-block;
     background-color: var(--partcategories-backgroundcolor);
     border: 1px solid black;
}
.PartCategories h2{
     padding: 1vw;
     font-size: var(--fontsizepartcategoriesul-h2);
     font-style: italic;
     color: var(--showcasetitle-color);
     margin: 0px;
     text-shadow: var(--partcategoriesul-h2-text-shadow);
}
.PartCategoriesul {
     font-size: 1vw;
     padding: 1%;
     margin: 0px;
     text-align: left;
     list-style-type: none;
}
.PartCategoriesul h2{
     padding: 0.7vw;
     font-size: var(--fontsizepartcategoriesul-h2);
     font-style: italic;
     color: var(--showcasetitle-color);
     background-color: var(--partcategoriesul-h2-color);
     border: 1px solid black;
     margin: 2vw 0px 0.3vw 0px;
     box-shadow: var(--box-shadow);
     text-shadow: var(--partcategoriesul-h2-text-shadow);
}
.PartCategoriesli {
     font-size: 0.8vw;
     font-style: normal;
     font-weight: normal;
     color: #000;
     padding: 0.5vw;
     padding-right: 1vw;
     padding-left: 2.6vw;
     margin: 0.3vw;
     text-align: left;
     border: 1px solid black;
     background-color: white; /* WARNING: Do not change this, as at least two other things are interrelated to it */
}
.PartCategoriesli img {
     width: 3%;
     margin-right: 0.6vw;
     vertical-align: middle;
}
.partsDivSections {
     border: 1px solid black;
     background-color: var(--partsDivSectionsBkgd-color);
     box-shadow: var(--box-shadow);
}
.partsDivSections h3 {
     font-size: 1.3vw;
     margin: 0.5vw 0.5vw 0.5vw 1vw;
     color: var(--partsDivSectionsh3-color);
     text-shadow: var(--partsDivSectionsh3-text-shadow);
}
.prefooternav {
     font-size: var(--fontsizeprefooter);
     font-style: italic;
     font-weight: normal;
     color: var(--showcasetitle-color);
     text-shadow: var(--prefooternav-text-shadow);
     width: auto;
     float: none;
     text-align: center;
     margin: 30px 0px 0px 0px;
     padding: 0px;
     line-height: 20px;
     clear: both;
}
.large-img-container {
     width: 100%;
}
.large-img-container img {
     width: 70%;
     margin-bottom: 3%;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
}
.contactbox_container {
     width: 100%;
     margin: 0% 0% 2% 0%;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
.contactboxes {
     border: 1px solid black;
     background-color: var(--contact-boxes-color);
     box-shadow: var(--box-shadow);
     text-align: center;
     display: inline;
     width: 23%;
     min-width: 140px;
     height: fit-content;
     margin: 0.2vw;
     padding: 20px;
}
.contactboxes h3 {
     font-size: var(--fontsizecontactboxesh3);
     font-weight: bold;
     margin: 0px;
     padding: 0px;
     padding-bottom: 10px;
     color: orangered;
     text-shadow: var(--universaltextshadowtextcolor);
}
.contactboxes a {
     font-size: var(--fontsizecontactboxesp);
     font-weight: bold;
     padding: unset;
     margin: 0px;
}
.contactboxes-p-pad {
     font-size: var(--fontsizecontactboxesp);
     font-weight: bold;
     padding: 12px 6px 12px 6px;
     margin: 0px;
}
.contactboxes-p-nopad {
     font-size: var(--fontsizecontactboxesp);
     font-weight: bold;
     padding: unset;
     margin: 0px;
}
.contactboxesEmail {
     font-size: var(--fontsizecontactboxesp);
     font-weight: bold;
     font-style: italic;
     cursor: pointer;
     color: blue;
     text-decoration: underline;
     padding: 12px 6px 12px 6px;
     margin: 0px;
}
.termssection {
     position: relative;
     width: 100%;
     margin: 0% 0% 2% 0%;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
.termsbox {
     border: 1px solid black;
     background-color: var(--terms-boxes-color);
     text-align: justify;
     display: inline;
     width: 70%;
     height: auto;
     margin: 5px;
}
.termsbox h3 {
     font-size: 0.95vw;
     font-weight: bold;
     padding: 0;
     margin: 0.8vw;
}
.termsbox p {
     font-size: 0.9vw;
     font-weight: normal;
     padding: 0;
     margin: 0.8vw;
}

.lubepage {
     width: 80%;
}
.Lube {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     justify-content: center;
}
.Lube ul {
     /* nothing here, just for media declarations */
}
.LubeListli {
     color: var(--showcasetext-color);
     width: 380px;
     height: auto;
     border: 3px solid #000;
     display: inline;
     background-color: var(--tile_background);
     text-align: left;
     float: left;
     margin: 0px 4px 8px 4px;
     padding: 0px;
}
.LubeListImgFloat {
     float: left;
     width: 150px;
     height: auto;
     padding-right: 5px;
     padding-top: 0px;
     vertical-align: top;
}
.LubeTitle {
     font-size: var(--fontsizeShowcaseTitle);
     font-style: italic;
     font-weight: bold;
     color: black;
     text-shadow: -2px -2px 2px white, 0 0 0.2em black, 0 0 0.2em lightgray;
     margin: 0px;
     padding: 0px;
     padding-top: 18px;
     text-decoration-line: underline;
}
.LubeListToolType {
     font-style: normal;
     font-weight: bold;
     color: var(--purple-color);
     text-decoration-line: none;
     font-size: 16px;
}
.LubeWeather {
     margin: 0px;
     font-size: 14px;
     font-weight: bold;
     color: red;
     padding-top: 5px;
     padding-bottom: 15px;
     text-align: center;
}
.LubeMoreDetails {
     margin: 0px;
     font-size: 16px;
     font-style: italic;
     font-weight: bold;
     color: black;
     text-decoration-line: none;
     padding-top: 15px;
     padding-bottom: 30px;
}
.LubeBestPriceCallAway {
     font-family: sans-serif;
     font-size: var(--fontsizeProdPageBestPriceCallAway);
     font-style: italic;
     font-size: 18px;
     font-weight: bold;
     color: var(--darkorange-color);
     text-shadow: 1px 1px 1px black;
     margin: 0px;
     padding-bottom: 40px;
}
.MATWhistory_container {
     display: flex;
     width: 100%;
     justify-content: center;
}
.MATWhistory_backgrnd {
     display: flex;
     width: 100%;
     height: 60em;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
     background-image: url('<?php echo $base_href_root;?>images/backgrnd-images/old-pic-2250-1780-a.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     justify-content: center;
}
.MATWhistory {
     font-size: 1vw;
     font-weight: normal;
     color: black;
     width: 70%;
     height: fit-content;
     margin: 9vw 0px 2vw 0px;
     padding: 3vw;
     text-align: justify;
     background-color: bisque;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
}
.SmallImageTileContainer {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 80%;
     margin: 0px;
     padding: 0px;
}
.MediumImageTileListliMain {
     width: 100%;
     max-width: 464px;
     margin: 0px 0.5% 0.25vw 0.5%;
     padding: 0px;
}
.SmallImageTileListliMain {
     width: 100%;
     max-width: 260px;
     margin: 0px 0.5% 0.25vw 0.5%;
     padding: 0px;
}
.SmallImageTileListliMain img{
     box-shadow: var(--box-shadow);
     width: 100%;
     height: auto;
}
.SmallImageTileListli {
     width: var(--tool-tile-div-width);
     max-width: var(--tool-tile-div-max-width);
     min-width: var(--tool-tile-div-min-width);
     margin: 0px 0.2vw 0.4vw 0.2vw;
     padding: 0px;
}
.SmallImageTileListli img{
     box-shadow: var(--box-shadow);
     width: 96%; /* was var(--tilewidth) */
     max-width: 100%; /* was 234px */
     height: auto;
}

.airhosedescription {
     font-size: 1vw;
     font-weight: bold;
     color: #000;
}
h6 {
     margin: 10px;
}
.ProdPageWrapperContainer {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     color: var(--prodpage);
     border: 1px solid var(--tabpg-contentborder-color);
     border-bottom: 1px solid white;
}
.ProdPageImage {
     width: 35%; /* was 30% */
     margin: 0px;
     height: auto;
     background-color: var(--prodpage);
     padding: 10px;
     max-height: 507px; /* added this on 24-12-10 */
}
.ProdPageImageSrc {
     height: 100%;
}
.ProdPageWrapper {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     margin: 0px;
     justify-content: center;
     background-color: var(--prodpage);
     margin: 0px;
     padding: 0px;
     padding-bottom: 30px;
     float: none;
}
.ProdPageDescription {
     width: 50%;
     height: auto;
     text-align: center;
     margin: 3% 0px 0px 0px;
}
.ProdPageToolBrand {
     font-size: var(--fontsizeProdPageToolBrand);
     font-style: italic;
     font-weight: bold;
     text-shadow: var(--universaltextshadowtextblack);
     color: #000;
     margin: 0px;
     padding: 0px;
}
.ProdPageToolSpecLogo {
     margin: 5px 0px 0px 0px;
     padding: 0px;
     width: 20%;
}
.ProdPageToolModel {
     font-size: var(--fontsizeProdPageToolModel);
     font-style: italic;
     font-weight: bold;
     text-shadow: var(--universaltextshadowtextblack);
     color: #000;
     margin: 0px;
     padding: 0px;
     padding-top: 5px;
}
.ProdPageToolType {
     font-size: var(--fontsizeProdPageToolType);
     font-style: italic;
     font-weight: bold;
     text-shadow: var(--universaltextshadowtextblack);
     color: #000;
     margin: 0px;
     padding: 0px;
     padding-top: 10px;
}
.ProdPage_TitleLogo {
     margin-top: 3%;
     width: 14%; /* was 20 */
}
.ProdPage_TitleLogoImg {
     width: 100%;
     height: auto;
     margin: 6% 0%;
     background-repeat: no-repeat;
}
.ProdPageLogo {
     display: flex;
     width: 100%;
     align-items: center; /* vertical */
     justify-content: center; /* horizontal */ /* was space-evenly */
     padding: 0px;
     margin: 2vw 0px 0px 0px;
     text-align: center;
}
.ProdPageLogocontainer {
     /* this is here so we can reference it in the media declaration at the bottom */
}
.ProdPageLogoImg {
     width: 100%;
     height: auto;
     margin-bottom: 1.4%;
}
.ProdPageArrowcontainer {
     width: 15%;
     margin-left: 1.3%;
     margin-right: 1.3%;
}
.ProdPageImgPDFcontainer {
     width: 40%;
     margin-bottom: 2vw;
}
.ProdPageImgPDF {
     width: 100%;
     height: auto;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
}
.ProdPageDetailDescription {
     width: 60%;
     margin: 16px 14% 3vw 20%;
     text-align: justify;
     font-size: var(--fontsizeProdPageDetailDescription);
     font-style: normal;
     font-weight: normal;
     color: #000;
}
.ProdPageDetailDescription h3{
     margin: 0px;
     padding-bottom: 0.5vw;
     text-align: left;
}
.ProdPageDetailDescription p{
     margin: 0px;
}
.ProdPageTable {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 60%;
     margin: 0px 14% 30px 20%;
     padding: 0px;
     font-size: var(--fontsizetabledata);
     font-style: normal;
     font-weight: bold;
     color: #000;
}
.ProdPageTableText {
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     color: #000;
}
.ProdPageShowPrices {
     font-size: var(--fontsizeProdPageShowPrices);
     font-style: italic;
     font-weight: bold;
     color: #00F;
}
.ProdPageBestPriceCallAway {
     font-family: sans-serif;
     font-size: var(--fontsizeProdPageBestPriceCallAway);
     font-style: italic;
     font-weight: bold;
     color: red;
     text-shadow: 1px 2px 3px black;
     margin-bottom: 0px;
}
.ProdPageAlsoNeedDiv {
     width: 100%;
     margin-top: 2vw;
     margin-bottom: 3vw;
     padding-left: 1.3vw;
     padding-right: 1.3vw;
     background-color: var(--prodpagealsoneed);
     border: 1px solid gray;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     box-shadow: var(--box-shadow);
}
.ProdPageAlsoNeedText {
     color: black;
     font-size: var(--fontsizeYouWillAlsoNeed);
     font-style: italic;
     margin-top: 1vw;
     margin-bottom: 0.6vw;
     text-shadow: var(--universaltextshadowtextblack);
}
.ProdPageAlsoNeedImgDiv {
     padding-bottom: 0.7vw;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
.ProdPageAlsoNeedImgs {
     width: 9vw;
     min-width: 100px;
     background-color: var(--tableimage-color);
     border: 1px solid black;
     margin: 0.3vw;
     box-shadow: var(--box-shadow);
}
.ProdPageLargePhoneNumber {
     font-size: var(--fontsizeProdPageLargePhoneNumber);
     font-style: normal;
     font-weight: bold;
     color: var(--darkorange-color);
     text-shadow: 1px 2px 3px black;
     margin-top: 10px;
}
.ShowcaseTileli {
     color: var(--showcasetext-color);
     width: var(--tilewidth);
     height: var(--tileheight);
     border: 3px solid #000;
     display: inline;
     background-color: var(--tile_background);
     box-shadow: var(--box-shadow);
     text-align: left;
     float: left;
     margin: 0px 5px 10px 5px;
     padding: 0px;
}
.ShowcaseTileli p {
     margin: 0px 0px 0px 120px;
     padding: 0px;
}
.ShowcaseListli {
     color: var(--showcasetext-color);
     height: 200px;
     width: 308px;
     border: 3px solid #000;
     display: inline;
     background-color: var(--tile_background);
     text-align: left;
     float: left;
     margin: 0px 4px 8px 4px;
     padding: 0px;
}
.ShowcaseListImgFloat {
     float: left;
     padding: 5px;
     width: 100%;
     max-width: 113px;
     height: auto;
}
.ShowcaseTitle {
     font-size: var(--fontsizeShowcaseTitle);
     font-style: italic;
     font-weight: bold;
     color: var(--showcasetitle-color);
     text-shadow: 0.7px 0.9px 0.1px black, 0px 0px 0.06em black, 0px 0px 15px #5151ff;
     text-decoration-line: underline;
}
.ShowcaseListBrand {
     font-size: 17px;
     font-style: italic;
     font-weight: bold;
     color: var(--showcasetext-color);
}
.ShowcaseListBrandLogo {
     width: auto;
     height: 40px;
}
.ShowcaseListPowerType {
     font-size: 12px;
     font-style: normal;
     font-weight: bold;
     color: var(--showcasetext-color);
}
.ShowcaseListToolType {
     font-size: 14px;
     font-style: normal;
     font-weight: bold;
}
.ShowcaseWeight {
     width: 90px;
     padding: 6px;
     font-size: 16px;
     font-weight: bold;
     color: black;
     background-color: var(--weight-fillcolor);
     border: 1px solid black;
}
.ShowcaseListDetails {
     font-size: var(--fontsizeShowcaseListDetails);
     font-style: italic;
     text-decoration-line: underline;
     font-weight: bold;
}
.ShowcaseWantBestPrice {
     font-size: 14px;
     font-style: normal;
     font-weight: bold;
     color: var(--tilebestprice-color);
}
.standardDescription {
     font-size: 12px;
     font-style: normal;
     font-weight: normal;
     color: #000;
}
.TaperRodsTableLarge {
     font-size: var(--fontsizetaperrodstablelarge);
     font-style: italic;
     font-weight: bold;
     color: gray;
     text-shadow: var(--tableheadertextshadow);
}
.TableLargeHeader {
     font-size: var(--fontsizetaperrodstablelarge);
     font-style: italic;
     font-weight: bold;
     color: var(--tableheadertext-color);
     text-shadow: var(--tableheadertextshadow);
     background-color: var(--safety-color);
}
.TableLargeHeader p {
     padding: 0.5vw;
}
.chisels_tables {
     width: 60%;
     margin-bottom: 2.5vw;
     border: 1px solid black;
     background-color: #f2eed5;  /* #f2eed5 or #f0eac6 */
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.chisels_tables_img_lrg {
     width: 100%;
     max-width: 200px;
     height: auto;
     border: 1px solid black;
     margin: 0px;
     padding: 0px;
}
.chisels_tables_img_sml {
     width: 95%;
     max-width: 200px;
     height: auto;
     border: 1px solid black;
}
.chisels_tables_text_title {
     margin: 0px 0px 2vw 0px;
     padding: 0px;
     font-size: 1.4vw;
     font-weight: bold;
     text-align: center;
}
.chisels_tables_text {
     margin: 0px;
     padding: 0px;
     font-size: 1vw;
     font-style: italic;
     font-weight: normal;
     text-align: center;
}

.hrt_tablehdrs {
     width: var(--tbl_width_rockbits);
     margin-top: 1vw;
     margin-bottom: 2vw;
     font-size: var(--fontsizetabledatalrg);
     font-weight: bold;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.hrt_tablehdrsmall {
     font-size: var(--fontsizetaperrodstablesmall);
     font-style: italic;
     font-weight: bold;
     color: orange;
     text-shadow: var(--tableheadertextshadow);
     background-color: var(--table7thcol-color);
}
.hrt_tbody {
     background-color: var(--table1stcol-color);
}
.warning_text {
     font-size: var(--fontsizewarningtext);
     font-style: italic;
     font-weight: bold;
     text-align: center;
     color: gold;
     text-shadow: var(--warning-text-shadow);
     background-color: red;
     border-color: black;
     padding: 0.5vw;
}


/* Style tab section & links */
.tabsection {
     display: flex;
     flex-wrap: wrap;
     background-color: var(--tabpg-bkgd-color);
     width: 100%;
     height: auto;
     border-left: 1px solid var(--tabpg-contentborder-color);
     border-right: 1px solid var(--tabpg-contentborder-color);
}
.tabsection_tabs {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     justify-content: space-evenly;
     padding-top: 3vw;
     border-top: 1px solid black;
     background-color: #4d4d4d;
}
.tablink {
     display: flex;
     flex-wrap: wrap;
     position: relative;
     top: 0px;
     background-color: lightgray;
     color: darkslategray;
     outline: none;
     cursor: pointer;
     padding: 0.7vw 0.5vw;
     font-size: var(--fontsizetablink);
     font-weight: bold;
     font-style: italic; 
     border: 2px solid slategray; /* was var(--tabpg-contentborder-color) */
     border-bottom-color: black;
     width: 19%;
     justify-content: center;
}
.tablink:hover {
     background-color: var(--navitems-bkgrnd-hover);
}


/* *************************** */
/*  WARNING: IF YOU ADD ANY CLASS TO THE FOLLOWING tabcontent classes (tabcontent, tabcontent_2, tabcontent_3), */
/*           YOU MUST EDIT THE 'tabs_function_script.php' FILE, AND ALSO ADD IT TO THE media DECLARATIONS BELOW */
/* *************************** */
/* Style the tab content */
.tabcontent {
     position: relative;
     top: 0px;
     display: none;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
     height: 100%;
     clear: both;
     font-size: var(--fontsizetabcontent);
     font-weight: bold;
     font-style: italic; 
     border-top: none;
     border-bottom: 1px solid black;
     background-color: var(--tabpg-contentbkgd-color);
     padding: 0px;
     margin-bottom: 0px;
}

/* Style alternate tab content for safety, pictures, and parts tabs */
.tabcontent_2 {
     position: relative;
     top: 0px;
     display: none;
     width: 100%;
     height: 100%;
     clear: both;
     font-size: var(--fontsizetabcontent);
     font-weight: bold;
     font-style: italic; 
     border-bottom: 1px solid var(--tabpg-contentborder-color);
     background-color: var(--tabpg-contentbkgd-color);
     margin-bottom: 0px;
     padding: 2.6vw;
     text-align: center;
     justify-content: center;
}
/* Style alternate tab content for technical tables which require a smaller font */
.tabcontent_3 {
     position: relative;
     top: 0px;
     display: none;
     width: 100%;
     height: 100%;
     clear: both;
     font-size: var(--fontsizetabcontentsmfont);
     font-weight: bold;
     font-style: italic; 
     border-bottom: 1px solid var(--tabpg-contentborder-color);
     background-color: var(--tabpg-contentbkgd-color);
     padding: 0px;
     margin-bottom: 0px;
}


/* classes for different table widths */
.tabtech50 {
     width: 44%;
     margin: 3%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech50 td {
     border: 1px solid black;
}
.tabtech50_imgs {
     width: 44%;
     margin: 3%;
     height: auto;
     max-width: fit-content;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech60 {
     width: 60%;
     margin: 3%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech60 td {
     border: 1px solid black;
}
.tabtech70 {
     width: 70%;
     margin: 3%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech70 td {
     border: 1px solid black;
}
.tabtech70_imgs {
     width: 70%;
     margin: 3%;
     height: fit-content;
     max-width: fit-content;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech80 {
     width: 80%;
     margin: 3%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech80 td {
     border: 1px solid black;
}
.tabtech90 {
     width: 90%;
     margin: 3%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech90 td {
     border: 1px solid black;
}
.tabtech94 {
     width: 94%;
     margin: 3%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech94 td {
     border: 1px solid black;
}
.tabtech98 {
     width: 98%;
     margin: 20px 0px;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.tabtech98 td {
     border: 1px solid black;
}
.tabtech98_smfont {
     width: 98%;
     margin: 20px 0px;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     font-size: 1vw;
}

.tabcontentdiv6 {
     width: var(--unvrsl_tbl_width);
     margin-top: 2vw;
     font-size: var(--fontsizetabcontent);
     font-weight: bold;
     z-index: 24;
}

.tabcontentdiv8 {
     width: var(--unvrsl_tbl_width);
     margin-top: 2vw;
     margin-bottom: 2vw;
     font-size: var(--fontsizetabcontent);
     font-weight: bold;
     position: sticky;
     top: auto;
     z-index: 28;
}




/* style the pdf logo on the safety and parts tabs */
.pdfLogoLarge {
     height: auto;
     margin-right: 0.5vw;
}


#Technical {background-color: var(--tabpg-contentbkgd-color);}
#Accessory {background-color: var(--tabpg-contentbkgd-color);}
#Safety    {background-color: var(--tabpg-contentbkgd-color);}
#Tool      {background-color: var(--tabpg-contentbkgd-color); justify-content: center;}
#Parts     {background-color: var(--tabpg-contentbkgd-color);}

sup {
     vertical-align: super;
     font-size: 0.9vw;
     font-weight: bold;
}

.slideshow-container {
     width: 70%;
     height: auto;
     margin-left: 0%;
     margin-top: 0%;
     margin-bottom: 0px;
     padding: 0px;
}
.slideshow-style {
     width: 100%;
     height: auto;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
}
.dot-display {
     width: 70%;
     text-align: center;
     margin-top: 0.6vw;
     margin-bottom: 2.5vw;
}
.dot {
     width: 0.9vw;
     height: 0.9vw;
     margin: 0 0.2vw;
     background-color: var(--dot-color);
     border: 1px solid var(--dark-brown);
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;
}
.active {
     background-color: var(--orange-color);
}
.dot:hover {
     cursor: pointer;
}
/* Fading animation */
.fade {
     animation: fade 1.0s;
}
@keyframes fade {
     from {opacity: 0} 
     to {opacity: 1}
}

/* ------------------------ */

/* MODAL POP-UP SECTION */
/* BE CAREFUL CHANGING ANY OF THE STYLE DECLARATIONS IN THIS MODAL POP-UP SECTION */
/* this section is for a modal pop-up (zoom) image, available, if desired, by (php required_once) 'modal_image_popup_script.php' */

#ImgPopup {
     width: auto; /* was 300px or 20% */
     max-width: 70%;
     cursor: pointer;
     border: 5px dashed green;
     animation: bord-anim 0.3s infinite;
}

@keyframes bord-anim {
     50% {border: 5px dashed gold;} /* darkorange */
}

/* The Modal (background) */
.modal {
     display: none; /* hidden by default */
     position: fixed; /* was relative */
     top: 5px; /* was non-existant */
     z-index: 99; /* Sit on top */
     width: 70%;
     height: 99%;
     overflow: scroll; /* was auto */
     margin-bottom: 3vw;
     border: 1px solid black;
}

/* Modal Content (image) */
.modal-content {
     margin-left: auto;
     margin-right: auto;
     margin-top: 5px;
     display: block;
     width: 100%;
     height: auto;
     border: none;
}

/* Caption 1 of Modal Image (at top) */
#caption1 {
     margin: auto;
     display: block;
     font-size: 1.3vw;
     font-style: italic;
     font-weight: bold;
     text-align: center;
     padding: 0px;
     padding-top: 1vw; /* this gets countered for the 'close' button by its 'top: -1vw' */
     height: auto;
}
/* Caption 2 of Modal Image (at bottom) */
#caption2 {
     margin: auto;
     display: block;
     font-size: 1.3vw;
     font-style: italic;
     font-weight: bold;
     text-align: center;
     padding: 0.6vw 0px;
     height: auto;
}

/* The Close Button */
.close {
     position: relative;
     top: -1vw; /* this counter-balances the '#caption1' style attribute 'padding-top: 1vw' so this button can be properly positioned */
     float: right;
     color: white;
     background-color: red;
     text-shadow: none;
     border: 2px solid black;
     font-size: 2vw;
     font-weight: bold;
     padding: 0px;
     padding-left: 0.5vw;
     padding-right: 0.5vw;
     transition: 0.6s;
     z-index: 100;
}

.close:hover, .close:focus {
     color: red;
     text-decoration: none;
     background-color: white;
     box-shadow:0px 0px 10px 0px black;
     cursor: pointer;
}

/* END OF MODAL POP-UP SECTION */
/* ------------------------ */


.displaydatestimes {
     display: flex;
     justify-content: center;
     font-weight: normal;
     margin-top: 0.7vw;
     text-align: center;
     line-height: 0.7;
}

/* ------------------------ */

#querys {
     display: none;
     width: 80%; /* was 96% */
     text-align: center;
     margin-top: 2vw;
     margin-left: 1%;
     margin-right: 1%;
}
.tableQ {
     width: 100%;
     text-align: center;
     font-size: 0.8vw;
     font-weight: normal;
     margin: 0px;
     background-color: var(--table-2ndpn-col-color);
     border: 1px solid gray;
     border-collapse: collapse;
}
.tableQ td {
     border: 1px solid gray;
     padding: 0.3vw;
}
.buttonQuery_div {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 2vw;
    margin-bottom: 1.5vw;
}
.buttonQuery {
     background-color: var(--tabpg-tab-color);
     border: 1px solid black;
     border-radius: 5px;
     box-shadow: var(--box-shadow);
     color: var(--black-color);
     text-align: center;
     text-decoration: none;
     font-size: 1vw;
     font-weight: bold;
     line-height: 1;
     cursor: pointer;
     width: 16%;
     margin: 0px 1% 0px 1%;
     padding: 0.5vw;
}
.buttonQuery a {
    color: black;
    text-decoration-line: none;
}
.buttonQuery:hover {
     background-color: var(--tabpg-tabhover-color);
}



/* ------------------------ */

.table_coupler_container {
     width: var(--unvrsl_tbl_width);
     padding: 0px;
     margin: 0px;
     display: flex;
     flex-wrap: wrap;
     position: sticky;
     top: auto;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     background-color: var(--tablebkgrd-color);
     z-index: 15;
}
.table_container_universal {
     width: 38%;
     padding: 1%;
     border: none;
}
.table_container_dual {
     margin: 0px;
     width: 58%;
     padding: 1%;
     border: none;
}
.sticky_couplershdr_universal {
     width: 100%;
     margin: 0px;
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     display: table;
     table-layout: fixed;
     position: sticky;
     top: 0px;
     z-index: 16;
}
.sticky_couplershdr_universal td {
     padding: 0px;
}
.table_couplers_universal {
     width: 100%;
     margin: 0px;
     padding: 0px;
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     display: table;
     table-layout: fixed;
     position: relative;
     z-index: 15;
}
.table_couplers_universal td {
     padding: 0px;
}
.sticky_couplershdr_dual {
     width: 100%;
     margin: 0px;
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     display: table;
     table-layout: fixed;
     position: sticky;
     top: 0px;
     z-index: 16;
}.sticky_couplershdr_dual td {
     padding: 0px;
}
.table_couplers_dual {
     width: 100%;
     margin: 0px;
     padding: 0px;
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     display: table;
     table-layout: fixed;
     position: relative;
     z-index: 15;
}
.table_couplers_dual td {
     padding: 0px;
}

.couplershdrbar {
     color: orange;
     background-color: lemonchiffon;
}
.couplershdrlarge {
     padding-top: 1vw;
     margin: 0px;
     font-size: var(--fontsizetablecouplerhdrlrg);
     color: orange;
     text-shadow: 1.3px 1.3px 0.1px black, -0.1px -0.5px 0.1px black, 2px 2px 2px gray;
     font-weight: bold;
}
.couplershdrsmall {
     padding-bottom: 1vw;
     font-size: 1vw;
     margin: 0px;
     color: orange;
     text-shadow: 1.3px 1.3px 0.1px black, -0.1px -0.5px 0.1px black, 2px 2px 2px gray;
     font-size: var(--fontsizetablecouplerhdr);
     font-weight: bold;
}
.couplershdrtitle {
     color: white;
     background-color: var(--tableheader-color);
     font-size: var(--fontsizetablehdr);
     font-weight: bold;
}
.couplershdrtitle td {
     width: 25%;
     height: 3.3vw;
}

/* ------------------------ */

.universal_table_container {
     width: var(--unvrsl_tbl_width);
     margin-top: 1vw;
     margin-bottom: 2vw;
}
.universal_table_container_1 {
     width: 68%;
     margin-top: 1vw;
     margin-bottom: 2vw;
}
.universal_table_container_2 {
     width: 78%;
     margin-top: 1vw;
     margin-bottom: 2vw;
}
.universal_table_container_3 {
     width: 88%;
     margin-top: 1vw;
     margin-bottom: 2vw;
}
.universal_table_container_4 {
     width: 98%;
     margin-top: 1vw;
     margin-bottom: 2vw;
}


.sticky_table_4 {
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     position: sticky;
     top: 0px;
     width: var(--tbl_width_plugbits);
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     display: table;
     table-layout: fixed;
     z-index: 19;
}
.sticky_table_4 p {
     margin: 0px;
}
.sticky_table_4 td {
     border: 1px solid black;
     padding: 0.4vw;
}
.sticky_table_4_luc {
     font-size: var(--fontsizetabledata);
}
.sticky_table_4 img {
     width: 100%;
     max-width: 446px;
     height: auto;
     margin-top: 1vw;
     margin-bottom: 1vw;
     border: 1px solid black;
}
.table_4 {
     width: var(--tbl_width_plugbits);
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     color: var(--black-color);
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     margin: 0px;
     padding-top: 3px;
     padding-bottom: 3px;
     display: table;
     table-layout: fixed;
     position: sticky;
     top: auto;
     z-index: 18;
}
.table_4 td {
     border: 1px solid black;
}

/* ------------------------ */

.sticky_table_5 {
     font-size: var(--fontsizetablehdr);
     font-weight: bold;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     width: var(--tbl_width_c9plugbits);
     display: table;
     table-layout: fixed;
     position: sticky;
     top: 0px;
     z-index: 21;
}
.sticky_table_5 p {
     margin: 0px;
}
.sticky_table_5 td {
     border: 1px solid black;
     width: var(--tbl_width_c9plugbits);
}
.sticky_table_5 img {
     width: 100%;
     max-width: 460px;
     height: auto;
     margin-top: 0.6vw;
     margin-bottom: 0.4vw;
     border: 1px solid black;
}
.sticky_table_5_spechdr {
     font-size: var(--fontsizetablehdr);
}
.table_5 {
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     color: var(--black-color);
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     margin: 0px;
     width: var(--tbl_width_c9plugbits);
     display: table;
     table-layout: fixed;
     position: sticky;
     top: auto;
     z-index: 20;
}
.table_5 td {
     border: 1px solid black;
}

/* ------------------------ */

.sticky_table_6 {
     position: sticky;
     top: 0px;
     width: var(--tbl_width_acc4col);
     font-size: var(--fontsizetablehdr);
     font-weight: bold;
     color: black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     z-index: 25;
}
.sticky_table_6 td {
     border: 1px solid black;
}
.table_6_hdr {
     color: white;
     border: 1px solid black;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     margin: 0px;
     width: var(--tbl_width_acc4col);
}

.table_6 {
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     color: var(--black-color);
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     margin: 0px 0px 2vw 0px;
     width: var(--tbl_width_acc4col);
     position: sticky;
     top: auto;
     z-index: 24;
}
.table_6 td  {
     border: 1px solid black;
}
.table_6_rows {
     width: var(--tbl_width_acc4col);
     margin-bottom: 0px;
     border-collapse: collapse;
}

/* ------------------------ */

.sticky_table_7 {
     position: sticky;
     top: 0px;
     font-size: var(--fontsizetablehdr);
     font-weight: bold;
     width: var(--tbl_width_rbbits);
     box-shadow: var(--box-shadow);
     z-index: 27;
}
.table_7_hdr {
     width: var(--tbl_width_rbbits);
     border-collapse: collapse;
}
.table_7 {
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     color: var(--black-color);
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     margin: 0px 0px 2vw 0px;
     width: var(--tbl_width_rbbits);
     position: sticky;
     top: auto;
     z-index: 26;
}
.table_7_row {
     width: var(--tbl_width_rbbits);
     border-collapse: collapse;
}

/* ------------------------ */

.sticky_table_8 {
     position: sticky;
     top: 0px;
     font-size: var(--fontsizetablehdr);
     font-weight: bold;
     width: var(--tbl_width_hammers);
     display: table;
     table-layout: fixed;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     z-index: 29;
}
.sticky_table_8 td {
     border: 1px solid black;
     border-collapse: collapse;
}
.table_8 {
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     color: var(--black-color);
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
     margin: 0px 0px 2vw 0px;
     width: var(--tbl_width_hammers);
     display: table;
     table-layout: fixed;
}
.table_8 td {
     border: 1px solid black;
     border-collapse: collapse;
}

.tableblankrow {
     background-color: var(--blankrow-color);
     height: var(--blankrow-height);
     padding: 0px;
}

.table_chisels_notice {
     width: 70%;
     margin: 0px 0px 3vw 0px;
     font-size: 1.3vw;
     font-weight: bold;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.table_chisels_notice td {
     border: 1px solid black;
}


/* ------------------------ */
.tblhdr_colors {
     background-color: var(--tableheader-color);
     color: white;
     text-shadow: var(--tableheadertextshadow);
}
.tblhdr_colors_brdr {
     border: 1px solid white;
}
.tblhdr_colors_lighter {
     background-color: #6f6f6f;
     color: white;
     text-shadow: var(--tableheadertextshadow);
}
.tableheaderlonger-color {
     background-color: var(--tableheader-color);
}

/* Popup container */
.popup {
     width: 250px;
     position: relative;
     left: -30px;
     border: 1px solid #f2f2f2;
     display: inline-block;
     font-size: var(--fontsizepopup);
     cursor: pointer;
     -webkit-user-select: none; /* Safari */
     -ms-user-select: none; /* IE */
     user-select: none;
     margin-bottom: 15px;
}
.popup span {
     color: var(--popuptext-color);
     text-shadow: var(--popupspan-shadow);
     font-weight: bold;
     width: 100%;
     height: 23px;
     padding: 0.25%;
     padding-top: 3px;
     padding-bottom: 3px;
     box-shadow: var(--box-shadow);
     display: block;
}

/* The actual popup */
.popup .popuptext {
     visibility: hidden;
     width: 370px; /* was 25vw */
     height: auto;
     background-color: var(--popuptext-background);
     font-weight: bold;
     color: var(--popuptext-color);
     text-shadow: var(--popuptext-shadow);
     text-align: left;
     border: 2px solid orangered;
     border-radius: 6px;
     padding: 10px;
     position: absolute;
     z-index: 90;
     top: 0px;
     left: -60px; /* was -4vw */
}
.popuptext p {
     font-size: 16px;
     margin: 0px 0px;
     padding: 0px 0px;
}
/* this next (i) is for the close-'x' box for the popuptext window */
.popuptext i {
     float: right;
     font-size: 18px;
     padding: 0px 6px 0px 5px;
     background-color: orangered;
     border: 1px solid white;
}
.popuptext ul {
     margin: 26px 10px 10px 0px;
     padding-left: 28px;
}

/* Toggle this class - hide and show the popup */
.popup .show {
     visibility: visible;
     animation: fadeIn .7s;
}
@keyframes fadeIn {
     from {opacity: 0;}
     to {opacity: 1;}
}

.popup-email-link {
     display: none; /* initial display off if large screen */
     position: relative;
     margin: 0.3vw 0px 0.3vw 0px;
     padding: 0px;
     font-size: 1.8vw;
     text-shadow: 1px 1px 0.1px black, -1px -1px 1em white, 2px 2px 3px gray;
}
.popup-email-link a span {
     color: darkorange;
     text-decoration-line: underline;
     box-shadow: none;
}


/* ------------------------ */
/* set class to blink (fade in and out) tool tile pdf image */
.blink_pdf {
     width: 44px;
     height: auto;
     margin-top: 0px;
     margin-right: 20px;
     vertical-align: middle;
     animation: blink 2s infinite;
}
@keyframes blink {
     50% {opacity: 0;}
}

/* set class to blink (fade in and out) accessory tools table record for longer lengths available */
.blink_longerlengths {
     animation: longerlengths 1.5s infinite;
     color: var(--tableheaderlonger-color);
     font-size: var(--fontsizetableheaderlonger);
     font-style: italic;
     text-shadow: var(--tablehdrlongershadow);
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     padding: 0.7vw;
}
@keyframes longerlengths {
     50% {opacity: 0;}
}

/* ------------------------ */

#buttonTop {
     display: none;
     width: 40px;
     height: 40px;
     cursor: pointer;
     position: fixed;
     bottom: 1.33vw;
     right: 2vw;
     z-index: 95;
}
#buttonTop img {
     width: 100%;
}

/* ------------------------ */

.maintdiv {
    width: 100%;
    background-color: orangered;
    border: 1px solid black;
}
.maint {
     text-align: center;
     margin: 0px;
     color: white;
     font-size: 1.2vw;
     font-weight: bold;
     font-style: italic;
     text-shadow: 1px 1px 2px black;
     padding: 13px 3px
}

/* ------------------------ */

caption { 
     display: none;
}

/* ------------------------ */

.multi-same-div { 
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     justify-content: center;
}

/* ------------------------ */

.all-tools-div { 
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     justify-content: center;
}

/* ------------------------ */

.tile-backgrnd-img {
     font-size: 33px; /* was 24px */
     font-style: italic;
     font-weight: bold;
     color: #ff8f00; /* was orangered */
     text-shadow: 2px 2px 1px black, -1px -1px 1px #eee, -4px -4px 6px white, 4px 4px 6px white;
     cursor: pointer;
     margin: 0.3vw 0.3vw 3vw 0.3vw;
     width: 300px;
     height: 200px;
     text-align: center;
     padding: 1vw 1vw; 
     border: 1px solid black;
     box-shadow: var(--box-shadow);
}
.toolparts-drawings {
     width: 100%;
     margin-bottom: 2vw;
}
.gotoDrawings {
     font-size: 0.8vw;
     font-style: italic;
     font-weight: bold;
     text-shadow: 0.1em 0.1em 0.1em white, -0.2em -0.2em 0.6em white;
     cursor: pointer;
     margin: 0.3vw 0.3vw 1.4vw 0.3vw;
     min-width: 240px;
     color: var(--black-color);
     background-color: orange;
     text-align: center;
     padding: 1vw 1vw; 
     border: 2px solid black;
     border-radius: 1vw;
     box-shadow: var(--box-shadow);
}

.DrawingCategories {
     font-size: 1vw;
     padding: 0px;
     margin-bottom: 2vw;
     text-align: left;
     list-style-type: none;
     box-shadow: var(--box-shadow);
     width: 100%;
     display: inline-block;
     background-color: var(--partcategories-backgroundcolor);
     border: 1px solid black;
}
.DrawingCategories h2{
     padding: 1vw;
     font-size: var(--fontsizepartcategoriesul-h2);
     font-style: italic;
     color: var(--showcasetitle-color);
     margin: 0px;
     text-shadow: var(--partcategoriesul-h2-text-shadow);
}
.DrawingCategoriesul {
     font-size: 1vw;
     padding: 1%;
     margin: 0px;
     text-align: left;
     list-style-type: none;
}
.DrawingCategoriesul h2{
     padding: 0.7vw;
     font-size: var(--fontsizepartcategoriesul-h2);
     font-style: italic;
     color: var(--showcasetitle-color);
     background-color: var(--partcategoriesul-h2-color);
     border: 1px solid black;
     margin: 2vw 0px 0.3vw 0px;
     box-shadow: var(--box-shadow);
     text-shadow: var(--partcategoriesul-h2-text-shadow);
}

.DrawingDivSections {
     display: flex;
     border: 1px solid black;
     background-color: var(--partsDivSectionsBkgd-color);
     box-shadow: var(--box-shadow);
}
.DrawingDivSections h3 {
     font-size: 1.3vw;
     margin: 0.5vw 0.5vw 0.5vw 1vw;
     color: var(--partsDivSectionsh3-color);
     text-shadow: var(--partsDivSectionsh3-text-shadow);
}

.DrawingCategoriesli {
     font-size: 0.8vw;
     font-style: normal;
     font-weight: normal;
     color: #000;
     padding: 0.5vw;
     margin: 0.3vw;
     text-align: center;
     border: 1px solid black;
     width: 20%;
     background-color: orange;
     display: -ms-grid;
     display: grid;
}
.DrawingCategoriesli img {
     width: 100%;
     vertical-align: top;
     border: 1px solid black;
}

/* begin parts search text box */
.YouAreViewingAllParts {
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     width: 300px;
     height: 250px;
     margin: 5px;
     color: var(--showcasetitle-color);
     background-color: antiquewhite;
     text-align: left;
     padding: 13px;
     box-shadow: var(--box-shadow);
     border: 1px solid black;
     border-radius: 10px;
     text-shadow: var(--universaltextshadowtextcolor);
}
.YouAreViewingAllParts h4{
     color: black;
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     text-shadow: none;
     margin: 5px 0px;
}
.YouAreViewingAllParts p {
     font-size: var(--fontsizeYouAreViewing);
     font-style: italic;
     font-weight: bold;
     margin: 0px;
     text-align: center;
     padding: 0px;
}
.YouAreViewingAllParts div {
     font-size: 1.3vw;
     text-shadow: none;
     color: black;
}
.YouAreViewingAllParts hr {
     width: 60%;
}

.AllPartsContainer {
     width: 100%;
     font-size: 1.3vw;
     font-style: italic;
     font-weight: bold;
     color: black;
     text-shadow: none;
}
.AllPartsContainer h5{
     margin: 5px 0px;
}
.AllPartsContent {
     width: 100%;
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     font-size: 18px;
     padding: 0px;
}
.AllPartsContent div{
     padding: 5px;
     margin-right: 14px;
     border: 1px solid black;
     background-color: white;
}
.AllPartsContent img{
     width: 110px;
     background-color: white;
}

.YouAreViewingSelectedPart {
     align-self: center;
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     width: 300px;
     height: 250px;
     margin: 5px 5px 4vw 5px;
     color: var(--showcasetitle-color);
     background-color: antiquewhite;
     text-align: left;
     padding: 13px;
     box-shadow: var(--box-shadow);
     border: 1px solid black;
     border-radius: 10px;
     text-shadow: var(--universaltextshadowtextcolor);
}
.YouAreViewingSelectedPart h4{
     color: black;
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     text-shadow: none;
     margin: 5px 0px;
}
.YouAreViewingSelectedPart h5{
     color: black;
     font-size: 16px;
     font-style: italic;
     font-weight: bold;
     text-shadow: none;
     margin: 5px 0px;
}
.SelectedPartContainer {
     width: 100%;
     font-size: 1.3vw;
     font-style: italic;
     font-weight: bold;
     color: black;
     text-shadow: none;
}
.SelectedPartContainer h5{
     margin: 5px 0px;
}
.SelectedPartContent {
     width: 100%;
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     font-size: 18px;
     padding: 0px;
}
.SelectedPartContentImg {
     width: 122px;
     height: 122px; /* new */
     justify-content: center;
     align-items: center;
     display: flex;
     padding: 5px;
     margin-right: 14px;
     border: 1px solid black;
     background-color: white;
}
.SelectedPartContentImg img{
     max-height: 110px; /* was 122px */
     max-width: 110px;
     background-color: white;
}
.SelectedPartContentQty {
     width: 137px;
     padding: 5px;
     border: 1px solid black;
     background-color: white;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     margin: 0px;
     text-align: center;
}
.SelectedPartContentQty cite{
     color: black;
     font-size: 13px;
     font-weight: normal;
}

.SelectedPartAddToCartButton {
     width: 90%;
     height: 30px;
     font-family: Arial, Verdana, Geneva, sans-serif;
     font-size: 14px;
     font-weight: normal;
     font-style: normal;
     color: gray;
     padding: 5px 10px;
     background-image: radial-gradient(#EFE, 40%, #8FA 70%, #4E8 90%); /* green */
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: default;
}

.UnselectSelectedPartContainer {
    justify-content: center;
    display: flex;
    margin-top: 10px;
}

.UnselectedSelectedPartButton {
     width: fit-content;
     height: 30px;
     font-family: Arial, Verdana, Geneva, sans-serif;
     font-size: 14px;
     font-weight: bold;
     font-style: normal;
     color: black;
     padding: 5px 10px;
     background-image: radial-gradient(#EFE, 40%, #8FA 70%, #4E8 90%); /* green */
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: pointer;
}

.YouAreViewingCart {
     font-size: 24px;
     font-style: italic;
     font-weight: bold;
     width: 100%;
     margin: 0px;
     color: var(--showcasetitle-color);
     text-align: center;
     padding: 0px;
     padding-bottom: 10px;
     text-shadow: var(--universaltextshadowtextcolor);
}
.YouAreViewingCart p {
     font-size: 24px;
     font-style: italic;
     font-weight: bold;
     margin: 0px;
     text-align: center;
     padding: 0px;
}
.ContinueShoppingButtonContainer {
     width: 100%;
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     justify-content: space-between;
     padding: 15px;
}
.CartContinueShoppingButtonContainer {
     width: 100%;
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     justify-content: center;
     padding: 0px;
     margin-bottom: 50px;
}
.ContinueShoppingButton {
     width: auto;
     height: auto;
     font-size: 1vw;
     padding: 8px 10px;
     margin: 10px;
     background-image: radial-gradient(#EFE, 40%, #8FA 70%, #4E8 90%);
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: pointer;
     z-index: 4;
}


/* this section handles the "Do you need any of these 'related accessories'" display above the cart items on trhe cart page */
.CartPageAlsoNeedDiv {
     width: 100%;
     padding-left: 1.3vw;
     padding-right: 1.3vw;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     box-shadow: var(--box-shadow);
     margin-top: 0px;
     margin-bottom: 20px;
     background-image: radial-gradient(#EFE, 40%, #8FA 70%, #4E8 90%);
     border: none;
     border-bottom: 1px solid black;
}

.CartPageAlsoNeedText {
     color: black;
     font-size: var(--fontsizeYouWillAlsoNeed);
     font-style: italic;
     margin-top: 1vw;
     margin-bottom: 0.6vw;
     text-shadow: var(--universaltextshadowtextblack);
     text-align: center;
}

.CartPageAlsoNeedImgDiv {
     padding-bottom: 0.7vw;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
}

.CartPageAlsoNeedImgDiv a {
     width: 25%;
}

.CartPageAlsoNeedImgDiv img {
     background-color: var(--tableimage-color);
     border: 1px solid black;
     margin: 0.3vw;
     box-shadow: var(--box-shadow);
     width: 90%;
     min-width: unset;
}

.CartPageAlsoNeedDivHdr {
     width: 100%;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     margin: 0px 0px 5px 0px;
     padding: 0px;
     background-color: var( --quicknav-title-bkgrnd);
     border-top: 1px solid black;
     border-left: none;
     border-bottom: 2px solid black;
     border-right: none;
     box-shadow: unset;
}

.cart_hdr_container {
     font-size: var(--fontsizesidenavquicknav);
     font-weight: bold;
     font-style: italic;
     text-align: center;
     text-decoration-line: underline;
     text-shadow: 2px 2px 2px white, 0 0 0.5em yellow, 0 0 1em white;
     width: 100%;
     height: auto;
     margin: 0px 0px 5px 0px;
     padding: 0px;
     background-color: var( --quicknav-title-bkgrnd);
     border-left: none;
     border-right: none;
     box-shadow: unset;
}
/* end of 'CartPageAlsoNeed' section */


.YouAreViewingAllPartsCart {
     display: flex;
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     color: black;
     text-align: left;
     background-color: #efefef;
     height: fit-content;
     padding: 35px 10px 35px 10px;
     border-radius: 0px; 
     border: none;
     -ms-flex-direction: unset;
     flex-direction: unset;
     flex-wrap: wrap;
     margin: 0px;
     box-shadow: none;
}
.CartParts-PN-Name-Image {
     width: 40%; /* was 260px, then was 100%, then was auto */
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     padding: 0px;
     margin-bottom: 5px;
}
.CartParts-PN-Name {
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 50%; /* was 200px, then was auto, then was 100% */
     padding: 0px;
}
.CartParts-PN-Name p {
     font-size: 16px;
     height: fit-content;
     text-align: left;
     margin: 2px;
}
.CartSelectedPartContentImg {
     width: 122px; /* new */
     height: 122px; /* new */
     padding: 2px;
     margin: 0px 5px 0px 0px;
     border: 1px solid black;
     background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
}
.CartSelectedPartContentImg img {
     max-height: 110px; /* was 122px */
     max-width: 110px;
     background-color: white;
}
.CartSelectedPartContentQty {
     border: 1px solid black;
     background-color: white;
     display: flex;
     text-align: center;
     width: 59%; /* was fit-content */
     margin: 0px 0px 0px 1%;
     padding: 5px;
     -ms-flex-direction: unset;
     flex-direction: unset;
}
.CartItemForm {
     width: 100%;
     display: flex;
     align-items: center;
     font-size: var(--fontsizesearchform);
     -ms-flex-direction: unset;
     flex-direction: unset;
     flex-wrap: wrap;
     justify-content: center;
}
.CartItemForm p {
     font-size: 14px;
     font-weight: normal;
     margin: 0px;
}
.CartItemFormDiv1 {
     margin-top: 7px;
     margin-bottom: 0px;
     padding-bottom: 0px;
     height: 30px;
}
.CartItemFormDiv2 {
     width: fit-content;
     padding: 0px;
     margin-top: 5px;
     margin-bottom: 5px;
}
.CartToolUpdateButton {
     color: black;
     font-size: var(--fontsizetabledata);
     font-weight: bold;
     width: 90%;
     height: 2vw;
     min-height: 16px;
     background-image: radial-gradient(#EFE, 40%, #8FA 70%, #4E8 90%);
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: pointer;
     padding: 0px 8px;
}
.ProdPageTable_table {
     margin-bottom: 2vw;
     width: 100%;
     border-collapse: collapse;
     box-shadow: var(--box-shadow);
}
.ProdPageTable_cart {
     width: 18%;
     padding: 0px;
     background-color: black;
     border-bottom: 1px solid white;
}
.ProdPageTable_cart_img {
     margin: 10px;
     width: 30%;
     vertical-align: middle;
}
.ProdPageTable_AddtoCart_cell {
     background-color: orangered;
     min-width: 44px;
     padding: 10px 4px;
}
.CartUpdateButton {
     color: gray;
     font-weight: normal;
     height: 30px;
     font-size: 13px;
     background-image: radial-gradient(#EFE, 40%, #8FA 70%, #4E8 90%);
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: default;
     width: 100px;
     padding: 0px;
}
.CartRemoveButton {
     height: 30px;
     font-size: 13px;
     font-weight: bold;  /* added 02-06-25 */
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: default;
     width: 100px;
     margin: 2px;
     padding: 0px;
     background-image: radial-gradient(#EFE, 40%, #fa2 70%, #F80 90%);
}

.AllPartsCartContainer {
     display: flex;
     flex-wrap: wrap;
     width: 49%;
     justify-content: flex-start;
     -ms-flex-direction: column;
     flex-direction: column;
     min-width: 290px;
     margin-bottom: 30px;
     border: 1px solid black;
     background-color: #efefef;
     box-shadow: var(--box-shadow);
}

/* ------------------------ */

.partno_1 {background-color: var(--table-1stpn-col-color);}     /* 7/8x3-1/4 */
.partno_2 {background-color: var(--table-2ndpn-col-color);}     /* 7/8x4-1/4 */
.partno_3 {background-color: var(--table-3rdpn-col-color);}     /* 1x4-1/4 */
.partno_4 {background-color: var(--table-4thpn-col-color);}     /* 1-1/8x6 */
.partno_5 {background-color: var(--table-5thpn-col-color);}     /* 1-1/4x6 */
.partno_6 {background-color: var(--table-6thpn-col-color);}     /* 3/4 C9 bits */
.partno_7 {background-color: var(--table-7thpn-col-color);}     /* rivet busters */
.partno_spec {background-color: var(--table-spline-col-color);} /* spline special */
.partno_0 {background-color: var(--table9thcol-color);}               /* dimmed column */
.partno_ochs {background-color: #1AFF53;}       /* chipping hammer hex */
.partno_ocrs {background-color: #FDFD36;}       /* chipping hammer round */
.partno_rchs {background-color: #C3E1CA;}       /* chipping hammer hex */
.partno_rcrs {background-color: var(--table-ch-rs-color);}         /* chipping hammer round */

.partno_ochs p {margin: 0px; padding: 1px;}
.partno_ocrs p {margin: 0px; padding: 1px;}
.partno_rchs p {margin: 0px; padding: 1px;}
.partno_rcrs p {margin: 0px; padding: 1px;}

.partno_button {
   font-family: Arial, Verdana, Geneva, sans-serif;
   font-size: 0.7vw;
   width: fit-content;
   height: fit-content;
   padding: 4px 10px;
   background-image: radial-gradient(white, 40%, aquamarine 70%, darkseagreen 90%);
}

/* ------------------------ */


.parts-search-notice {
     font-weight: bold;
     font-size: 14px;
     color: black;
}
.parts-search {
     overflow: hidden;
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
     margin-bottom: 1.1vw;
}
.parts-search-container {
     width: auto;
     height: auto;
     margin: 10px;
     font-size: var(--fontsizesearch-container);
}
.parts-searchform {
     width: 100%;
     display: flex;
     font-size: var(--fontsizesearchform);
}
.parts-searchform div {
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     margin-bottom: 30px;
}
.parts-searchform input[type=search] {
     font-size: 18px;
     font-style: italic;
     border: 1px solid var(--black-color);
     width: 100%;
     margin-right: 5px;
     padding: 5px;
     box-shadow: var(--box-shadow);
}
.parts-searchform input[type=image] {
     height: 34px;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
     padding: 0px; 
     background-image: url('../../images/logos/magnifying-glass.png'); 
     background-size: 34px; 
     background-repeat: no-repeat; 
}
.parts-searchform-1 {
     width: 100%;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     align-items: center;
     font-size: var(--fontsizesearchform);
}
.parts-searchform-1 div {
     display: flex;
     -ms-flex-direction: row;
     flex-direction: row;
     margin-bottom: 30px;
}
.parts-searchform-plus-minus-buttons {
     width: 26px;
     height: 25px;
     margin: 0px 8px;
     padding: 0px 6px;
     font-size: 14px;
     border: 1px solid black;
     border-radius: 2px;
     cursor: pointer;
}
.parts-searchform-qty-input {
     font-size: 14px;
     font-weight: normal;
     font-style: normal;
     text-align: center;
     width: 47px;
     height: 25px;
}
.parts-livesearch {
     position: absolute; /* was relative */
     z-index: 3;
     background-color: white;
     font-size: 16px;
     width: 130px;
     margin-left: 0px;
}
.parts-livesearch table {
     border-collapse: collapse;
     width: 100%;
     text-align: left;
}
.parts-livesearch td{
     padding-left: 10px;
}
.parts_buttons {
     width: 100%;
     border: 1px solid black;
     border-bottom: none;
     color: black;
     background-color: white;
     padding: 3px 10px;
     text-align: left;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 0px;
     cursor: pointer;
}
.parts_buttons:hover {
     background-color: lightgray;
}
.parts_buttons_last {
     border-bottom: 1px solid black;
}
/* end parts search text box */

/* begin parts display flex container */
.flex-container-parts {
     display: flex;
     width: 89%;
     height: 630px;
     flex-wrap: wrap;
     align-content: start;
     overflow: scroll;     
     background-color: black;
     padding: 0px;
     border: 2px solid black;
}

.flex-container-parts > div {
     background-color: #eee;
     width: 200px;
     height: 200px;
     margin: 0px;
     text-align: center;
     line-height: 75px;
     font-size: 30px;
     border: 2px solid black;
}
/* end parts display flex container */

/* begin submit_form_pane */
.submit_rfq_pane {
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 48%;
     min-width: 290px;
     height: auto;
     justify-content: center;
     height: auto;
     margin: 0px 0px 0px 10px;
}
.submit_rfq_hdr_container {
     border: 1px solid black;
     box-shadow: var(--box-shadow);
     background-color: var( --quicknav-title-bkgrnd);
     font-size: var(--fontsizesidenavquicknav);
     font-weight: bold;
     font-style: italic;
     text-align: center;
     text-decoration-line: underline;
     text-shadow: 2px 2px 2px white, 0 0 0.5em yellow, 0 0 1em white;
     width: 100%;
     height: auto;
     margin: 0px;
     padding: 10px;
}
.submit_rfq_container {
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     justify-content: center;
     border: 1px solid black;
     box-shadow: var(--box-shadow);
     background-color: white;
     text-align: center;
     width: 100%;
     height: auto;
     margin: 0px;
     padding: 10px;
}
.how_it_works_div {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
}
.how_it_works_ul {
     text-align: left;
     list-style-type: square;
     color: orangered;
}
.how_it_works_ul li {
     font-size: 15px;
     padding-bottom: 4px;
}
.how_RFQ_works {
     color: black;
     font-size: 17px;
     font-weight: bold;
     font-style: italic;
}
.cart_rfq_container {
     background-color: #ffebdf;
}
.cart_rfq_form {
     text-align: left;
     min-width: 268px;
     border: 1px solid black;
     padding: 10px;
}
.cart_rfq_form em {
     color: red;
     font-size: 12px;
     font-weight: bold;
}
.cust_info {
     font-size: 18px;
     font-weight: bold;
     text-align: left;
     padding: 5px;
     max-width: 330px;
     border: 2px solid black;
     background-color: orange;
}
.cart_rfq_form_label {
     font-size: 12px;
     font-style: italic;
}
.cart_rfq_form_input {
     font-size: 14px;
     width: 100%;
     max-width: 330px;
     margin-bottom: 5px;
     border: 1px solid black;
     background-color: #bef; /* a lightblue */
     line-height: 1.5;
}
.cust_shipping_info {
     font-size: 18px;
     font-weight: bold;
     text-align: left;
     padding: 5px;
     padding-bottom: 0px;
     margin-top: 20px;
     margin-bottom: 5px;
     border: 2px solid black;
     max-width: 330px;
     background-color: orange;
}
.shipCheckBoxLabel {
     font-size: 14px;
     font-weight: bold;
     color: blue;
     max-width: 330px;
     display: block;
}
.shipCheckBox {
     width: 20px;
     height: 20px;
     margin-top: 0px;
     margin-bottom: 15px;
}
.cart_rfq_form_input_ship {
     font-size: 14px;
     width: 100%;
     max-width: 330px;
     margin-bottom: 5px;
     border: 1px solid black;
     background-color: #ff8; /* a light yellow */
     line-height: 1.5;
}
.submit_rfq_button {
     color: gray;
     font-size: 14px;
     font-weight: normal;
     background-image: radial-gradient(#EFE, 40%, #fa2 70%, #F80 90%); /* orange */
     border: 1px solid black;
     border-radius: 3px;
     box-shadow: 2px 2px 2px black;
     cursor: default;
     margin: 30px;
     padding: 5px 20px;
}
/* end submit_form_pane */


/* fade-in-displays */
.container-for-cart-fade-in {
     display: none;
     position: fixed;
     top: 0px;
     left: 0px;
     z-index: 100;
     width: 100%;
     height: 100%;
     overflow: hidden;
     border: 4px solid black;
     background-color: rgba(0,0,0,0.7);
}
.fade-in-display-added-to-cart {
     display: none;
     opacity: 1;
     position: fixed;
     top: 0px;
     left: 0px;
     width: 330px;
     height: auto;
     justify-content: center;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
     padding: 15px;
     margin: 0px;
     border: 4px solid black;
     background-color: yellow;
     animation-name: fade-in-display;
     animation-duration: 1s;
     animation-iteration-count: 1;
     z-index: 7;
}
.img-added-to-cart {
     margin-right: 5px;
     border: 1px solid black;
     max-height: 120px;
     max-width: 120px;
}
.container-for-rfq-fade-in {
     display: none;
     justify-content: center;
     position: fixed;
     top: 0px;
     left: 0px;
     z-index: 100;
     width: 100%;
     height: 100%;
     border: 4px solid black;
     background-color: rgba(0,0,0,0.7);
}
.fade-in-display-rfq-submission {
     display: none;
     opacity: 1;
     position: fixed;
     width: 330px;
     height: auto;
     justify-content: center;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
     padding: 15px;
     margin: 0px;
     border: 4px solid black;
     background-color: yellow;
     animation-name: fade-in-rfq;
     animation-duration: 1s;
     animation-iteration-count: 1;
     z-index: 7;
}
@keyframes fade-in-display {
     0% {opacity: 0;}
     100% {opacity: 1;}
}
/* end of fade-in-display */
@keyframes fade-in-rfq {
     0% {opacity: 0;}
     100% {opacity: 1;}
}
/* end of fade-in-display */

/* customer info table for email */
.cust_info_div {
     display: block;
     width: 370px;
     padding: 30px 5px;
}

.cust_info_table {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
     border: none;
     margin: 0px 0px 30px 0px;
}

.cust_info_tbody {
}

.cust_info_tr_title {
     font-size: 11px;
     border: none;
}

.cust_info_tr_text {
     display: flex;
     width: 100%;
     height: 22px;
     font-size: 13px;
     border: none;
     margin-bottom: 5px;
}

.cust_info_td_title {
     width: 100%;
     border: none;
     padding: 0px;
}

.cust_info_td_text {
     width: 100%;
     border: 1px solid black;
     padding: 2px 6px;
}

.order-details-table {
     text-align: left;
     width: 100%;
     font-size: 13px;
     min-width: 268px;
     border-collapse: collapse;
     margin-top: 0px;
     padding: 5px;
}
.order-details-table-title {
     font-size: 16px;
     font-weight: bold;
     background-color: #ddd;
}
.order-details-table-hdrs {
     font-size: 13px;
     font-weight: bold;
}
/* end of customer info table for email */


/* new SEO code for index page */
.main-content {
    display: block;
    width: auto;
    background-color: white;
    margin: 0px 0px 2vw 0px;
    border: 1px solid black;
    box-shadow: var(--box-shadow);
    padding: 0.7vw;
}
.main-heading {
    font-size: 2.5vw;
    padding: 0px;
    width: 100%;
    margin: 0px 0px 0.2vw 0px;
    text-align: center;
	text-shadow: 1px 1px 1px lightgray, -1px -1px 1px white, 2px 2px 4px #111;
}
.section-heading {
    color: orangered;
    font-size: 2vw;
    font-style: italic;
    width: 100%;
    display: block;
    text-align: center;
    margin: 0px;
    text-shadow: 1px 1px 1px black, -1px -1px 1px white, 2px 2px 4px #111;
}
.paragraph-text {
    font-size: 1.4vw;
    font-weight: normal;
    text-align: center;
    margin: 0px auto 0px auto;
    padding: 0px;
    line-height: 1.2;
    padding-bottom: 0.3vw;
    font-style: italic;
}
.text-highlight-link {
    font-weight: bold;
    font-style: italic;
}
.list-item-link {
    padding: 0px 2px;
}
/* end new SEO code for index page */




/* IMPORTANT: @media DECLARATIONS MUST COME AFTER THEIR RESPECTIVE CLASS DEFINITIONS, SO, */
/* FOR SIMPLICITY, WE PUT THEM HERE, AT THE BOTTOM, AFTER ALL STYLE DEFINITIONS */

/* IMPORTANT: THE @media ORDER LISTED IS CRITICAL, AS BROWERS ALWAYS USE THE LAST LISTED DECLARATION OF EACH STYLE */

/* THIS LIST IS ORDERED BY WIDTHS, LARGEST TO SMALLEST, EXCEPT FOR ALL '.featurebanner' */
/* (which are kept together because it gets adjusted many times), FOLLOWED BY HEIGHT ADJUSTMENTS, */
/* AND LASTLY, ADJUSTMENTS BY BOTH WIDTH AND HEIGHT. */


/* modify or un-display items/values for different screen sizes and resizes at certain widths and/or heights */

     /* set these orientation changes if desired */
     /* @media only screen and (orientation: portrait) {html {background-color: turquoise;}} */
     /* @media only screen and (orientation: landscape) {html {background-color: darkgray;}} */
     
     @media screen and (max-width: 1500px) {.chisels_tables {width: var(--unvrsl_tbl_width);}}
     @media screen and (max-width: 1500px) {.universal_table_container {width: 95%;}}
     @media screen and (max-width: 1500px) {.universal_table_container_1 {width: 95%;}}
     @media screen and (max-width: 1500px) {.universal_table_container_2 {width: 95%;}}
     @media screen and (max-width: 1500px) {.universal_table_container_3 {width: 95%;}}
     @media screen and (max-width: 1500px) {.universal_table_container_4 {width: 95%;}}
	 @media screen and (max-width: 1500px)  {#ImgPopup {width: 30%;}}
     
     @media screen and (max-width: 1400px)  {.partno_button {font-size: 10px;}}
     @media screen and (max-width: 1400px)  {.header-center {height: 8.5vw; padding: 5px 0px;}}
     @media screen and (max-width: 1320px)  {.contactboxes {width: 227px;}}
     @media screen and (max-width: 1320px)  {.contactboxes h3 {font-size: 17px;}}
     @media screen and (max-width: 1320px)  {.contactboxes h3 {margin: 11px;}}
     @media screen and (max-width: 1320px)  {.contactboxes p {font-size: 15px;}}
     @media screen and (max-width: 1320px)  {.contactboxes a {font-size: 15px;}}
     @media screen and (max-width: 1320px)  {.contactboxes div {font-size: 15px;}}
     @media screen and (max-width: 1260px)  {.ContinueShoppingButton {font-size: 13px;}}
     @media screen and (max-width: 1260px)  {.YouAreViewing p {font-size: 23px;}}
     @media screen and (max-width: 1260px)  {.selectby {font-size: 18px;}}
     
     @media screen and (max-width: 1140px)  {.header-center {height: 9vw;}}
     @media screen and (max-width: 1100px)  {.PartCategoriesli {font-size: 9px;}}
     @media screen and (max-width: 1100px)  {.navbar-h2-2 {font-size: 1.6vw;}}
     @media screen and (max-width: 1024px)  {.YouAreViewingAllTools {font-size: 16px;}}
     @media screen and (max-width: 1100px)  {.navbar-h2-1 {font-size: 20px;}}
     @media screen and (max-width: 1140px)  {.navbar-h2-2 {font-size: 17px;}}
     @media screen and (max-width: 1060px)  {.navbar-h2-2 {display: none;}}
     @media screen and (max-width: 1060px)  {.popup {display: none;}}
     @media screen and (max-width: 1060px)  {.popup-email-link {display: inline-flex; font-size: 17px;}}
     
     /* adjust the main 'featurebanner' width when screen shrinks beyond this width. all 'featurebanner' declarations here for simplicity of modification */
     @media screen and (max-width: 1900px)  {.featurebanner {width: 78%;}}
     @media screen and (max-width: 1700px)  {.featurebanner {width: 76%;}}
     @media screen and (max-width: 1500px)  {.featurebanner {width: 75%;}}
     @media screen and (max-width: 1400px)  {.featurebanner {width: 74%;}}
     @media screen and (max-width: 1335px)  {.featurebanner {width: 73%;}}
     @media screen and (max-width: 1260px)  {.featurebanner {width: 72%;}}
     @media screen and (max-width: 1200px)  {.featurebanner {width: 71%;}}
     @media screen and (max-width: 1100px)  {.featurebanner {width: 69%;}}
     @media screen and (max-width: 1024px)  {.featurebanner {width: 67%;}}
     @media screen and (max-width:  950px)  {.featurebanner {width: 72%;}}
     @media screen and (max-width:  850px)  {.featurebanner {width: 98%;}}
     /* @media screen and (max-width:  800px)  {.featurebanner_srch {width: 98%;}} */
     @media screen and (max-width: 950px)  {.header-center-h4 {margin: 0px 0px 0px 0px; padding: 0px 15px;}}
     @media screen and (max-width: 950px)  {.header-center-h4-span1 {display: none;}}
     @media screen and (max-width: 950px)  {.header-center span {font-size: 14px;}}
     @media screen and (max-width: 950px)  {.header-center {height: 8.5vw; padding: 5px 0px;}}
     @media screen and (max-width: 950px)  {.brands_container {display: none;}}
     @media screen and (max-width: 950px)  {.slideshow-container {display: none;}}
     @media screen and (max-width: 950px)  {.dot-display {display: none;}}
     @media screen and (max-width: 950px)  {.large-img-container {display: none;}}
     @media screen and (max-width: 950px)  {.MATWhistory {width: 500px; font-size: 13px;}}
     @media screen and (max-width: 950px)  {.airhose-container {width: 95%;}}
     @media screen and (max-width: 950px)  {.airfilter-container {width: 95%;}}
     @media screen and (max-width: 950px)  {.air_h1_1 {font-size: 2.4vw;}}
     @media screen and (max-width: 950px)  {.air_text h3 {font-size: 2.0vw;}}
     @media screen and (max-width: 950px)  {.lubepage {width: 100%;}}
     @media screen and (max-width: 950px)  {.chisels_tables_text_title {font-size: 1.8vw;}}
     @media screen and (max-width: 950px)  {.chisels_tables_text {font-size: 1.2vw;}}
     @media screen and (max-width: 950px)  {.hrt_tablehdrs { font-size: 1.4vw;}}
     @media screen and (max-width: 950px)  {.table_chisels_notice {width: 95%;}}
     @media screen and (max-width: 950px)  {.sticky_table_7 {width: 100%;}}
     @media screen and (max-width: 950px)  {.table_7 {width: 100%;}}
     @media screen and (max-width: 950px)  {.sticky_table_5 {font-size: 1.6vw;}}
     @media screen and (max-width: 950px)  {.table_5 {font-size: 1.4vw;}}
     @media screen and (max-width: 950px)  {.sticky_table_4 {font-size: 1.6vw;}}
     @media screen and (max-width: 950px)  {.table_4 {font-size: 1.4vw;}}
     @media screen and (max-width: 950px)  {.contactboxes {width: 250px;}}
     @media screen and (max-width: 950px)  {.footer-rockdrill {width: 365px;}}
     @media screen and (max-width: 910px)  {.termsbox {min-width: 300px;}}
     @media screen and (max-width: 910px)  {.termsbox h3 {font-size: 9px;}}
     @media screen and (max-width: 910px)  {.termsbox p {font-size: 8.5px;}}
     @media screen and (max-width: 910px)  {.prefooternav {font-size: 11.28px;}}
     @media screen and (max-width: 910px)  {.ProdPageImageSrc {width: 70%;}}
     @media screen and (max-width: 910px)  {.ProdPage_TitleLogo {display: none}}
     @media screen and (max-width: 910px)  {.ProdPageToolBrand {font-size: 20px;}}
     @media screen and (max-width: 910px)  {.ProdPageToolSpecLogo {font-size: 69px;}}
     @media screen and (max-width: 910px)  {.ProdPageToolModel {font-size: 16px;}}
     @media screen and (max-width: 910px)  {.ProdPageToolType {font-size: 13.5px;}}
     @media screen and (max-width: 910px)  {.ProdPageLogocontainer {display: none;}}
     @media screen and (max-width: 910px)  {.ProdPageArrowcontainer {display: none;}}
     @media screen and (max-width: 910px)  {.ProdPageDescription {width: 80%;}}
     @media screen and (max-width: 910px)  {.ProdPageDetailDescription {width: 85%; font-size: 9px;}}
     @media screen and (max-width: 910px)  {.ProdPageImgPDFcontainer {width: 100%;}}
     @media screen and (max-width: 910px)  {.ProdPageImgPDF {width: 85%; max-width: 100%;}}
     @media screen and (max-width: 910px)  {.ProdPageTable {width: 85%; font-size: 1.3vw;}}
     @media screen and (max-width: 910px)  {.sticky_table_8 {font-size: 1.8vw;}}
     @media screen and (max-width: 910px)  {.table_8 {font-size: 1.6vw;}}
     @media screen and (max-width: 890px)  {.navbar-h2-1 {font-size: 17px;}}
     
     @media screen and (max-width: 850px)  {.sidenav-container {display: none;}}
     @media screen and (max-width: 840px)  {#emailFormDiv {position: relative;}}
     @media screen and (max-width: 820px)  {.header-logos {width: 120px; height: 76px;}}
     @media screen and (max-width: 820px)  {.header-filler {display: none;}}
     @media screen and (max-width: 820px)  {.center-container {width: 365px; margin-left: auto; margin-right: auto;}} /* was 100%, and without margin */
     @media screen and (max-width: 820px)  {.header-center {margin-bottom: 0px; height: 70px;}} /* width: 370px; height: 76px */
     @media screen and (max-width: 820px)  {.page-header h1 {font-size: 24.5px;}}
     @media screen and (max-width: 820px)  {.page-header h3 {font-size: 8px;}}
     @media screen and (max-width: 820px)  {.page-header h4 {font-size: 10px;}}
     @media screen and (max-width: 820px)  {.header-center span {font-size: 14px;}}
	 @media screen and (max-width: 820px)  {.main-content {width: 365px;}}
	 @media screen and (max-width: 820px)  {.main-heading {font-size: 20px;}}
	 @media screen and (max-width: 820px)  {.section-heading {font-size: 16.4px;}}
	 @media screen and (max-width: 820px)  {.paragraph-text {font-size: 11.5px;}}
     @media screen and (max-width: 820px)  {.selectbybranddisplaydiv {height: 7vw; margin: 0.8vw;}}
     @media screen and (max-width: 820px)  {.universal_table_container {width: 100%;}}
     @media screen and (max-width: 820px)  {.blink_longerlengths {font-size: 2.2vw;}}
     @media screen and (max-width: 820px)  {.tablink {font-size: 1.8vw;}}
     @media screen and (max-width: 820px)  {.tabcontentdiv6 {width: 98%; font-size: 1.8vw;}}
     @media screen and (max-width: 820px)  {.tabcontentdiv8 {width: 98%; font-size: 1.8vw;}}
     @media screen and (max-width: 820px)  {.tabtech50 {width: 94%; font-size: 2vw;}}
     @media screen and (max-width: 820px)  {.tabtech60 {width: 94%; font-size: 2vw;}}
     @media screen and (max-width: 820px)  {.tabtech70 {width: 94%; font-size: 2vw;}}
     @media screen and (max-width: 820px)  {.tabtech80 {width: 94%; font-size: 1.7vw;}}
     @media screen and (max-width: 820px)  {.tabtech90 {width: 94%; font-size: 1.7vw;}}
     @media screen and (max-width: 820px)  {.tabtech94 {font-size: 1.7vw;}}
     @media screen and (max-width: 820px)  {.tabtech98 {font-size: 1.7vw;}}
     @media screen and (max-width: 820px)  {sup {font-size: 1.7vw;}}
     @media screen and (max-width: 820px)  {.sticky_table_7 {font-size: 2.4vw;}}
     @media screen and (max-width: 820px)  {.table_7 {font-size: 2.2vw;}}
     @media screen and (max-width: 820px)  {.sticky_table_6 {font-size: 1.8vw;}}
     @media screen and (max-width: 820px)  {.table_6 {font-size: 1.8vw;}}
     @media screen and (max-width: 820px)  {.sticky_table_5 {font-size: 2.0vw;}}
     @media screen and (max-width: 820px)  {.sticky_table_5_spechdr {font-size: 1.8vw;}}
     @media screen and (max-width: 820px)  {.table_5 {font-size: 2.0vw;}}
     @media screen and (max-width: 820px)  {.sticky_table_4 {font-size: 2.0vw;}}
     @media screen and (max-width: 820px)  {.table_4 {font-size: 2.0vw;}}
     @media screen and (max-width: 820px)  {.table_coupler_container {width: 100%;}}
     @media screen and (max-width: 820px)  {.table_container_universal {width: 98%;}}
     @media screen and (max-width: 820px)  {.table_container_dual {width: 98%;}}
     @media screen and (max-width: 820px)  {.couplershdrtitle {font-size: 2vw;}}
     @media screen and (max-width: 820px)  {.couplershdrlarge {font-size: 5vw;}}
     @media screen and (max-width: 820px)  {.couplershdrsmall {font-size: 3vw;}}
     @media screen and (max-width: 820px)  {.table_couplers_universal {font-size: 2.6vw;}}
     @media screen and (max-width: 820px)  {.table_couplers_dual {font-size: 2.7vw;}}
     @media screen and (max-width: 820px)  {.table_chisels_notice {width: 100%;}}
     @media screen and (max-width: 820px)  {.hrt_tablehdrs { font-size: 1.6vw;}}
     @media screen and (max-width: 820px)  {.chisels_tables_text_title {font-size: 2.2vw;}}
     @media screen and (max-width: 820px)  {.chisels_tables_text {font-size: 1.6vw;}}
     @media screen and (max-width: 820px)  {.ProdPageTable {font-size: 1.8vw;}}
     @media screen and (max-width: 800px)  {.navbar-h2-1 {display: none;}}
     @media screen and (max-width: 800px)  {.search .searchform {display: none;}}
     @media screen and (max-width: 800px)  {.search .search-container {width: 365px;}}
     @media screen and (max-width: 800px)  {.popup-phone-link {display: inline-flex; font-size: 17px; width: 48%;}}
     @media screen and (max-width: 800px)  {.popup-email-link {display: inline-flex; font-size: 17px; width: 48%;}}
     
     /* this is specifically for toggling between the quicknav bar and the quicknav menu icon for smaller screens */
     /* see also height modifications for max-width 800px sidenav-container_toggle */
     @media screen and (max-width: 800px)  {.quicknav_button {visibility: visible;}}
     @media screen and (max-width: 800px)  {.sidenav-container_toggle {display: block; visibility: hidden; margin-left: 2px;}}
     @media screen and (max-width: 800px)  {.sticky_navbar {align-content: center; margin-bottom: 10px;}}
     @media screen and (max-width: 800px)  {.navbar {justify-content: left; margin-left: 40px;}}
     @media screen and (max-width: 800px)  {.navitems {font-size: 13px; padding: 7px 8px;}}
     @media screen and (max-width: 800px)  {.navitems:hover {font-size: 13px; padding: 7px 8px;}}
     @media screen and (max-width: 800px)  {.sticky_pagenav {display: none;}}
     @media screen and (max-width: 800px)  {.gotoDrawings { font-size: 12px;}}
	 @media screen and (max-width: 800px)  {#ImgPopup {width: 70%;}}
	 @media screen and (max-width: 800px)  {#caption1 {font-size: 4vw;}}
	 @media screen and (max-width: 800px)  {#caption2 {font-size: 4vw;}}
     @media screen and (max-width: 740px)  {.tabcontent_2 {font-size: 9px;}}
     @media screen and (max-width: 740px)  {.tabcontent_3 {font-size: 8px;}}
     @media screen and (max-width: 740px)  {.ProdPageAlsoNeedText {font-size: 15px;}}
     @media screen and (max-width: 740px)  {.ProdPageBestPriceCallAway {font-size: 13px;}}
     @media screen and (max-width: 740px)  {.ProdPageLargePhoneNumber {font-size: 13px;}}
     @media screen and (max-width: 740px)  {.ProdPageShowPrices {font-size: 9px;}}
     @media screen and (max-width: 740px)  {.footernav {font-size: 7px;}}
     @media screen and (max-width: 740px)  {.footerVOA {font-size: 10px;}}
     @media screen and (max-width: 740px)  {.footer table {font-size: 30px;}}
     @media screen and (max-width: 740px)  {.footerAttrb {font-size: 9px;}}
     @media screen and (max-width: 740px)  {.footerCopy, .footerCopy span, .footerCopy sup, .footerDesign {font-size: 10px;}}
     @media screen and (max-width: 740px)  {.TableLargeHeader {font-size: 4vw;}}
     @media screen and (max-width: 722px)  {.header-logos {display: none;}}
     @media screen and (max-width: 722px)  {.header-plus-more {display: none;}}
     @media screen and (max-width: 722px)  {.maint {font-size: 3vw;}}
     
     @media screen and (max-width: 684px)  {.hrt_tablehdrs {font-size: 1.5vw;}}
     @media screen and (max-width: 640px)  {.ProdPageTable {font-size: 2.3vw;}}
     @media screen and (max-width: 640px)  {.blink_longerlengths {font-size: 2.0vw;}}
     @media screen and (max-width: 640px)  {.sticky_table_8 {font-size: 1.6vw;}}
     @media screen and (max-width: 640px)  {.table_8 {font-size: 2.4vw;}}
     @media screen and (max-width: 640px)  {.sticky_table_5 {font-size: 2.6vw;}}
     @media screen and (max-width: 640px)  {.table_5 {font-size: 2.4vw;}}
     @media screen and (max-width: 640px)  {.sticky_table_4_luc {font-size: 1.8vw;}}
     @media screen and (max-width: 640px)  {.sticky_table_5 td {padding: 1px;}}
     @media screen and (max-width: 640px)  {.sticky_table_4 td {padding: 1px;}}
     @media screen and (max-width: 630px)  {.AllPartsCartContainer {width: 100%;}}
     @media screen and (max-width: 630px)  {.submit_rfq_pane {width: 100%; margin-left: 0px;}}
     
     @media screen and (max-width: 600px)  {.partno_button {font-size: 1.2vw;}}
     
     @media screen and (max-width: 588px)  {.prefooternav {font-size: 10px;}}
     @media screen and (max-width: 588px)  {.tabcontent {font-size: 7px;}}
     @media screen and (max-width: 588px)  {.YouAreViewing p {font-size: 16px;}}
     @media screen and (max-width: 588px)  {.selectby {font-size: 12px;}}
     @media screen and (max-width: 510px)  {.header-center a.site {display: none;}}
     @media screen and (max-width: 510px)  {.navitems {font-size: 12px; padding: 7px 6px;}}
     @media screen and (max-width: 510px)  {.navitems:hover {font-size: 12px; padding: 7px 6px;}}
     @media screen and (max-width: 510px)  {.tablink {font-size: 1.6vw;}}
     @media screen and (max-width: 510px)  {.center-container {margin-bottom: 0px;}}
     @media screen and (max-width: 510px)  {.header-center-h4 {margin: 0px 0px 0px 0px; padding: 0px;}}
     @media screen and (max-width: 454px)  {.search .search-container {width: 95%; margin: 6px 0px;}}
     @media screen and (max-width: 454px)  {.sticky_navbar {width: 98%; align-content: center;}}
     @media screen and (max-width: 454px)  {.navitems {padding: 7px 4px;}} 
     @media screen and (max-width: 454px)  {.navitems:hover {padding: 7px 4px;}}
     @media screen and (max-width: 454px)  {.sidenav-container_toggle {margin-left: 6px;}}
     @media screen and (max-width: 454px)  {.YouAreViewing p {font-size: 16px;}}
     @media screen and (max-width: 454px)  {.ProdPageBestPriceCallAway {text-shadow: 0.03em 0.07em 0.1em black;}}
     @media screen and (max-width: 454px)  {.ProdPageLargePhoneNumber {text-shadow: 0.03em 0.07em 0.1em black;}}
     @media screen and (max-width: 454px)  {.SmallImageTileContainer {width: 100%;}}
     @media screen and (max-width: 454px)  {.Lube {width: 100%;}}
     @media screen and (max-width: 454px)  {.Lube ul {width: 100%; padding: 0px;}}
     @media screen and (max-width: 454px)  {.LubeListli  {width: 100%; text-align: unset;}}
     @media screen and (max-width: 454px)  {.LubeListImgFloat {width: 40%;}}
     @media screen and (max-width: 454px)  {.LubeListToolType {font-size: 2.8vw;}}
     @media screen and (max-width: 454px)  {.LubeBestPriceCallAway {font-size: 15px;}}
     @media screen and (max-width: 454px)  {.footerCSS {display: none;}}
     @media screen and (max-width: 454px)  {.footer table {font-size: 36px;}}
     @media screen and (max-width: 454px)  {.table_8 {font-size: 1.6vw;}}
     @media screen and (max-width: 454px)  {.tablink {top: 0px; font-size: 14px; width: 93%; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding-top: 3px; padding-bottom: 3px;}}
     @media screen and (max-width: 454px)  {.tabsection_tabs {-ms-flex-direction: column; flex-direction: column; padding-top: 17px;}}
     
     @media screen and (max-width: 588px)  {.navbar_accssy {display: none;}}
     @media screen and (max-width: 410px)  {.navitems {font-size: 9px;}}
     @media screen and (max-width: 410px)  {.navitems:hover {font-size: 9px;}}

     @media screen and (max-width: 365px)  {.navitems {font-size: 8px; padding: 10px 4px;}}
     @media screen and (max-width: 365px)  {.navitems:hover {font-size: 8px; padding: 10px 4px;}}
     @media screen and (max-width: 359px)  {.page-header h1 {font-size: 5vw;}}
     @media screen and (max-width: 359px)  {.navbar_contact {display: none;}}

/* ---------------------------*/
/* HEIGHT MODIFICATIONS START */
     @media screen and (max-height: 400px)  {.sticky_table_8 p {margin: 0px;}}
     @media screen and (max-height: 400px)  {.partno_ochs p img {display: none;}}
     @media screen and (max-height: 400px)  {.partno_ocrs p img {display: none;}}
     @media screen and (max-height: 400px)  {.partno_rchs p img {display: none;}}
     @media screen and (max-height: 400px)  {.partno_rcrs p img {display: none;}}
     @media screen and (max-height: 400px)  {.header-center {height: auto; border: 1px solid black;}}
     @media screen and (max-height: 400px)  {.header-logos, .header-filler, .search, .popup {display: none;}}
     @media screen and (max-height: 400px)  {.tableheaderlonger-color {display: none;}}
     @media screen and (max-height: 400px)  {.sticky_pagenav {display: none;}}
     @media screen and (max-height: 400px)  {.navitems  {padding-top: 7px; padding-bottom: 8px;}}
     @media screen and (max-height: 400px)  {.navitems:hover {padding-top: 7px; padding-bottom: 8px;}}
     @media screen and (max-height: 400px) and (max-width: 800px) {.flex-container {padding-top: 0px;}}
     @media screen and (max-height: 400px) and (max-width: 510px) {.header-center {height: 56px; border: 1px solid black; margin-bottom: 0px;}}
     @media screen and (max-height: 400px)  {.page-header h3 {display: none;}}
     @media screen and (max-height: 400px)  {.page-header h4 a {display: none;}}
     @media screen and (max-height: 400px)  {.page-header h4 a img {display: none;}}
     @media screen and (max-height: 400px)  {.header-center-h4 {margin: 0px; padding: 0px}}
     @media screen and (max-height: 400px)  {.header-center-h4-span1 {display: none;}}
     @media screen and (max-height: 400px)  {.page-header h5 {display: flex; margin: 0px 0px 0px 0px;}}
     @media screen and (max-height: 400px)  {.navbar-h2-1 {display: none;}}
     @media screen and (max-height: 400px)  {.navbar-h2-2 {display: none;}}
     @media screen and (max-height: 400px)  {.popup-phone-link {display: inline-flex; font-size: 17px; width: 48%; margin: 0px 0px 0px 10%;}}
     @media screen and (max-height: 400px)  {.popup-email-link {display: inline-flex; font-size: 17px; width: 48%; margin: 0px 0px 0px 0px;}}
     @media screen and (max-height: 400px) and (max-width: 1060px)  {.header-plus-more {display: none;}}
     @media screen and (max-height: 400px) and (max-width: 800px) {.sidenav-container_toggle {display: block; visibility: hidden;}}
     @media screen and (max-height: 400px) and (max-width: 515px) {.navitems {font-size: 12px;}}
     @media screen and (max-height: 400px) and (max-width: 515px) {.navitems:hover {font-size: 12px;}}
     @media screen and (max-height: 400px) and (max-width: 335px) {.navitems {font-size: 8px; padding: 10px 3px;}}
     @media screen and (max-height: 400px) and (max-width: 335px) {.navitems:hover {font-size: 8px; padding: 10px 3px;}}
/* HEIGHT MODIFICATIONS END */
/* ---------------------------*/