/* CHANGES ************New version - combining all common styles into single stylesheet & cleaned up cascades - 11//16 ~ CN********************/

/*NOTE - Here are the media breakpoints for reference. Please use these when editing styles.
	- max-device-width: 360px
	- max-width: 450px
	- max-width: 479px
	- max-width: 480px
	- min-device-width: 480px and max-device-width: 767px
	- max-width: 767px
	- min-width: 768px
	- min-width: 768px and max-width: 959px
	- min-width: 768px and max-width: 1023px
	- min-width: 768px and max-width: 1024px
	- min-width: 960px
	- max-width: 960px
	- max-width: 1024px
	- min-width: 1025px
	- min-width: 1025px and max-width: 1199px
	- min-width: 1200px
	- print
	- screen
	- screen and device-aspect-ratio: 3/4
*/
/*using 1025px width (iPad) for @screen-md instead of default bootstrap 992px)*/

/*changed file path for glyphicons from default*/

/*NOTE -- MAIN CONTAINERS***/

html {
     height: 100%;
}
.psg-container {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     font-family: helvetica;
     font-size: 16px;
     color: #000000;
     margin: 0;
     background-color: #eee;
     background-repeat: no-repeat;
     background-attachment: fixed;
}

.mainwrapper {
     background: #fff;
     box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999, 0px 15px 30px -12px #999;
     padding: 0 0 1em 0;
     min-width: 100%;
}

.smcontainer {
     margin-right: auto;
     margin-left: auto;
}

@media (max-width: 1024px) {
     .psg-container {
          background: #fff;
          margin-bottom: 0 !important;
     }
     .smcontainer {
          width: 100%;
          background-color: #fff;
          padding-left: 0;
          margin-top: 0;
     }
     .mainwrapper {
          background: #fff;
          box-shadow: none;
          padding: 0;
          min-width: 100%;
          overflow-x: hidden;
          margin-bottom: -15px;
     }
}

@media (min-width: 960px) {
     .smcontainer {
          width: 97%;
          margin-right: 0;
          margin-left: 0;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .smcontainer {
          width: 100%;
     }
}

@media (min-width: 1025px) {
     .smcontainer {
          width: 99%;
          margin-right: auto;
          margin-left: auto;
     }
}

@media (min-width: 1200px) {
     .smcontainer {
          width: 1000px;
          margin-right: auto;
          margin-left: auto;
     }
}


/*NOTE -- SCREEN READER***/

.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
}

/*NOTE -- TOP LOGO***/

.logo {
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	padding: 3px 0 0 5px;
	width: calc(100% - 650px);
}
.img-logo{
  display: block;
  height: auto;
}
@media (max-width: 767px) {
     .attractors-wrapper {
          margin-top: 0.5em !important;
          gap: 0.5em !important;
          flex-flow: column;
     }
	.logo {
		font-size: 12px;
		text-align: center;
		width: 100%;
          padding: 0px 0 0;
	}
	.img-logo {
          display: block;
          margin: 0 auto;
          width: 100%;
          max-width: 265px !important;
	}
}


/*NOTE -- FONTS*/

.b { font-weight: bold; }
.i { font-style: italic; }
.u { text-decoration: underline; }
.strike { text-decoration: line-through; }
.normal { font-weight: normal; }

p, cite {
	line-height: 1.5;
	margin: 1.2em 0;
}
ul, ol, div.p , #madeinusa-disclaimer{
	line-height: 1.5;
}

h1,
.mainbody h1 + h2 {
     text-align: center;
     width: 100%;
     margin: 0.5em auto;
}
h2, h3, h4 {
     text-align: center;
     width: 100%;
     margin: 1em auto;
}
article h1 {
     font-size: 2em;
}
@media (max-width: 767px) {
     .mainbody h1 + h2, h1 {
          width: 90%;
          margin: 0.5em auto;
     }
}

.heading {
     font-size: 28px;
}

.small {
     font-size: 0.65em;
     padding-top: 5px;
}

.fs10 { font-size: 0.625em; }
.fs11 { font-size: 0.6875em; }
.fs12 { font-size: 0.75em; }
.fs13 { font-size: 0.8125em; }
.fs14 { font-size: 0.875em; }
.fs15 { font-size: 0.9375em; }
.fs16 { font-size: 1em; }
.fs17 { font-size: 1.0625em; }
.fs18 { font-size: 1.125em; }
.fs20 { font-size: 1.25em; }
.fs22 { font-size: 1.375em; }
.fs24 { font-size: 1.5em; }
.fs25 { font-size: 1.5625em; }
.fs26 { font-size: 1.625em; }
.fs28 { font-size: 1.75em; }
.fs30 { font-size: 1.875em; }
.fs32 { font-size: 2em; }

/*NOTE -- LINKS & Abbreviations***/

a {
     color: #01079b;
     text-decoration: underline;
     cursor: pointer;
}
a:visited { color: #609; }
a:hover { color: #d96905; }
.nodec, a.nodec {
     text-decoration: none;
}

/*Camera icon link styles:*/
a.camera:link, a.camera:visited { color: #1675bb; }	
a.camera:hover { color: #d96905; }

abbr {
     border-bottom: 1px dotted;
}
@media only screen and (max-device-width: 1024px) {
     abbr {
          border-bottom: none;
     }
}

/* WIDTHS */

.w50 { width: 50px; }
.w70 { width: 70px; }
.w75 { width: 75px; }
.w85 { width: 85px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w115 { width: 115px; }
.w125 { width: 125px; }
.w130 { width: 130px; }
.w150 { width: 150px; }
.w160 { width: 160px; }
.w170 { width: 170px; }
.w175 { width: 175px; }
.w180 { width: 180px; }
.w190 { width: 190px; }
.ww350 { width: 350px; }

.w10 { width: 10%; } /*for ten equal columns*/
.w11 { width: 11.1%; } /*for nine equal columns*/
.w12 { width: 12.5%; } /*for eight equal columns*/
.w14 { width: 14.285%; } /*for seven equal columns*/
.w16 { width: 16.6%; } /*for six equal columns*/
.w20 { width: 20%; } /*for five equal columns*/
.w25 { width: 25%; } /*for four equal columns*/
.w32 { width: 33.3%; } /*for three equal columns - doesn't change on mobile*/
.w33 { width: 33.3%; } /*for three equal columns*/

/*These widths are for use with the .dropdown-menu.product to expand the contents of the nested ul beyond the parent container - if questions, ask CN*/
.w110p { width: 110%; }
.w120p { width: 120%; }
.w130p { width: 130%; }
.w140p { width: 140%; }
.w150p { width: 150%; }
.w160p { width: 160%; }
.w170p { width: 170%; }
.w180p { width: 180%;}
.w190p { width: 190%; }
.w200p { width: 200%; }

.w200 { width: 20%; }
.w201 { width: 20%; }
.w225 { width: 22.5%; }
.w240 { width: 24%; }
.w250 { width: 25%; }
.w251 { width: 25%; }
.w275 { width: 27.5%; }
.w285 { width: 28.5%; }
.w300 { width: 30%; }
.w301 { width: 30%; }
.w325 { width: 32.5%; }
.w350 { width: 35%; }
.w351 { width: 35%; }
.w375 { width: 37.5%; }
.w400 { width: 40%; }
.w401 { width: 40%; }
.w410 { width: 41%; }
.w425 { width: 42.5%; }
.w450 { width: 45%; }
.w451 { width: 45%; }
.w475 { width: 47.5%; }
.w499 { width: 50%; }
.w500 { width: 50%; }
.w525 { width: 52.5%; }
.w550 { width: 55%; }
.w560 { width: 56%; }
.w575 { width: 57.5%; }
.w600 { width: 60%; }
.w625 { width: 62.5%; }
.w650 { width: 65%; }
.w675 { width: 67.5%; }
.w700 { width: 70%; }
.w725 { width: 72.5%; }
.w750 { width: 75%; }
.w770 { width: 77%; }
.w780 { width: 78%; }
.w790 { width: 79%; }
.w800 { width: 80%; }
.w825 { width: 82.5%; }
.w850 { width: 85%; }
.w875 { width: 87.5%; }
.w900 { width: 90%; }
.w925 { width: 92.5%; }
.w950 { width: 95%; }
.w975 { width: 97.5%; }
.wmax { width: 100%; }

/*for pictures at top of toilet parts pages when there are 2*/
.tpwidth { width: 33%; }
.toilet-image-width { width: 60%; }

@media (min-width: 768px) and (max-width: 959px) {
     
     .w800, .w825, .w850, .w875 { width: 95%; }
     
     .w900, .w925, .w950, .w975, .wmax { width: 95%; }
}

@media (max-width: 767px) {
     .w10 { width: 25%; } /*for ten equal columns*/
     .w11 { width: 33.3%; } /*for nine equal columns*/
     .w12 { width: 25%; } /*for eight equal columns*/
     .w14 { width: 25%; } /*for seven equal columns*/
     .w16 { width: 33.3%; } /*for six equal columns*/
     .w20 { width: 33.3%; } /*for five equal columns*/
     .w25 { width: 50%; } /*for four equal columns*/
     .w33 { width: 95%; } /*for three equal columns*/
     
     .w200, .w225, .w240, .w250, .w275, .w285, .w300, .w325, .w350, .w375, .w400, .w410, .w425, .w450, .w475, .w499 { width: 50%; }
     
     .w201, .w251, .w301, .w351, .w401, .w451, .w500, .w525, .w550, .w560, .w575, .w600, .w625, .w650, .w675, .w700, .w725 { width: 100%; }
     
     .w750, .w770, .w780, .w790, .w800, .w825, .w850, .w875 { width: 95%; }
     
     .w900, .w925, .w950, .w975, .wmax { width: 100%; }
	
	.tpwidth { width: 50%; }
	.toilet-image-width { width: 90%; }
}


/*NOTE -- HEIGHTS */

.h03 { height: 3px; }
.h16 { height: 16px; }
.h20 { height: 20px; }
.h25 { height: 25px; }
.h30 { height: 30px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h65 { height: 65px; }
.h70 { height: 70px; }
.h75 { height: 75px; }
.h90 { height: 90px; }
.h100 { height: 100px; }
.h110 { height: 110px; }
.h125 { height: 125px; }
.h150 { height: 150px; }
.h175 { height: 175px; }
.h200 { height: 200px; }
.h225 { height: 225px; }
.h250 { height: 250px; }
.h300 { height: 300px; }
.h350 { height: 350px; }


/*NOTE -- HORIZONTAL LINES***/

hr {
     background-color: #bbbbbb;
     border-width: 0;
     color: #444;
     height: 1px;
     margin: 20px auto;
     text-align: center;
}

.hr500 {
     width: 50%;
     margin: 20px auto;
}
.hr550 {
     width: 55%;
     margin: 20px auto;
}
.hr600 {
     width: 60%;
     margin: 20px auto;
}
.hr650 {
     width: 65%;
     margin: 20px auto;
}
.hr700 {
     width: 70%;
     margin: 20px auto;
}
.hr750 {
     width: 75%;
     margin: 20px auto;
}

.hr770 {
     width: 77%;
     margin: 20px auto;
}

.hr800 {
     width: 80%;
     margin: 20px auto;
}

.hr850 {
     width: 85%;
     margin: 20px auto;
}

.hr900 {
     width: 90%;
     margin: 20px auto;
}

.hr950 {
     width: 95%;
     margin: 20px auto;
}

.hrmax {
     width: 100%;
     margin: 20px auto;
}

.tophr {
     width: 95%;
     margin: 20px auto;
}

@media (max-width: 767px) {
     .tophr {
          margin: 10px auto;
     }
}


/* PADDING and MARGINS */

.m0a { margin: 0 auto;
} /* In order to use this class, a width must be specified */
.p0 { padding: 0px; }
.pt0 { padding-top: 0px; }
.pl0 { padding-left: 0px; }
.pb0 { padding-bottom: 0px; }
.pr0 { padding-right: 0px; }
.p2 { padding: 2px; }
.pt2 { padding-top: 2px; }
.pl2 { padding-left: 2px; }
.pb2 { padding-bottom: 2px; }
.pr2 { padding-right: 2px; }
.p3 { padding: 3px; }
.pt3 { padding-top: 3px; }
.pl3 { padding-left: 3px; }
.pb3 { padding-bottom: 3px; }
.pr3 { padding-right: 3px; }
.p4 { padding: 4px; }
.pt4 { padding-top: 4px; }
.pl4 { padding-left: 4px; }
.pb4 { padding-bottom: 4px; }
.pr4 { padding-right: 4px; }
.p5 { padding: 5px; }
.pt5 { padding-top: 5px; }
.pl5 { padding-left: 5px; }
.pb5 { padding-bottom: 5px; }
.pr5 { padding-right: 5px; }
.ptb5 { padding: 5px 0px 5px 0px; }
.p7 { padding: 7px; }
.pt7 { padding-top: 7px; }
.pl7 { padding-left: 7px; }
.pb7 { padding-bottom: 7px; }
.pr7 { padding-right: 7px; }
.p10 { padding: 10px; }
.pt10 { padding-top: 10px; }
.pl10 { padding-left: 10px; }
.pb10 { padding-bottom: 10px; }
.pr10 { padding-right: 10px; }
.p11 { padding: 11px; }
.pt11 { padding-top: 11px; }
.pl11 { padding-left: 11px; }
.pb11 { padding-bottom: 11px; }
.pr11 { padding-right: 11px; }
.p11 { padding: 12px; }
.pt12 { padding-top: 12px; }
.pl12 { padding-left: 12px; }
.pb12 { padding-bottom: 12px; }
.pr12 { padding-right: 12px; }
.p13 { padding: 13px; }
.pt13 { padding-top: 13px; }
.pl13 { padding-left: 13px; }
.pb13{ padding-bottom: 13px; }
.pr13 { padding-right: 13px; }
.p15 { padding: 15px; }
.pt15 { padding-top: 15px; }
.pl15 { padding-left: 15px; }
.pb15 { padding-bottom: 15px; }
.pr15 { padding-right: 15px; }
.p20 { padding: 20px; }
.pt20 { padding-top: 20px; }
.pr20 { padding-right: 20px; }
.pb20 { padding-bottom: 20px; }
.pl20 { padding-left: 20px;}
.p25 { padding: 25px; }
.pt25 { padding-top: 25px; }
.pr25 { padding-right: 25px; }
.pb25 { padding-bottom: 25px; }
.pl25 { padding-left: 25px; }
.padless { padding: 1px !important; }

.m0 { margin: 0px; }
.mt0 { margin-top: 0px; }
.ml0 { margin-left: 0px;}
.mb0 { margin-bottom: 0px; }
.mr0 {  margin-right: 0px; }
.m3 { margin: 3px; }
.mt3 { margin-top: 3px; }
.ml3 { margin-left: 3px; }
.mb3 { margin-bottom: 3px; }
.mr3 { margin-right: 3px; }
.mlr3 { margin: 0 3px; }
.m5 { margin: 5px; }
.mt5 { margin-top: 5px; }
.ml5 { margin-left: 5px; }
.mb5 { margin-bottom: 5px; }
.mr5 { margin-right: 5px; }
.mtb5 { margin: 5px 0; }
.mlr5 { margin: 0 5px; }
.m7 { margin: 7px; }
.mt7 { margin-top: 7px; }
.ml7 { margin-left: 7px; }
.mb7 { margin-bottom: 7px; }
.mr7 {  margin-right: 7px; }
.mlr7 { margin: 0 7px; }
.m10 { margin: 10px; }
.mt10 { margin-top: 10px; }
.ml10 { margin-left: 10px; }
.mb10 { margin-bottom: 10px; }
.mr10 { margin-right: 10px; }
.mlr10 { margin: 0 10px; }
.mtb10 { margin: 10px 0; }
.m15 { margin: 15px; }
.mt15 { margin-top: 15px; }
.ml15 { margin-left: 15px; }
.mb15 { margin-bottom: 15px; }
.mr15 { margin-right: 15px; }
.mlr15 { margin: 0 15px; }
.mtb15 { margin: 15px 0; }
.m20 { margin: 20px; }
.mt20 { margin-top: 20px; }
.ml20 { margin-left: 20px; }
.mb20 { margin-bottom: 20px; }
.mr20 { margin-right: 20px; }
.mlr20 { margin: 0 20px; }
.mtb20 { margin: 20px 0; }

/*responsive margins*/
.m05 { margin: 0.5em; }
.mt05 { margin-top: 0.5em; }
.ml05 { margin-left: 0.5em; }
.mb05 { margin-bottom: 0.5em; }
.mr05 { margin-right: 0.5em; }
.mlr05 { margin: 0 0.5em; } 
.m15m { margin: 1.5em; }
.mt15m { margin-top: 1.5em; }
.ml15m { margin-left: 1.5em; }
.mb15m { margin-bottom: 1.5em; }
.mr15m { margin-right: 1.5em; }
.m2m { margin: 2em; }
.mt2m { margin-top: 2em; }
.ml2m { margin-left: 2em; }
.mb2m { margin-bottom: 2em; }
.mr2m { margin-right: 2em; }
.m25m { margin: 2.5em; }
.mt25m { margin-top: 2.5em; }
.ml25m { margin-left: 2.5em; }
.mb25m { margin-bottom: 2.5em; }
.mr25m { margin-right: 2.5em; }

/* margins tied to root element font-size */

.m05rem { margin: 0.5rem; }
.mt05rem { margin-top: 0.5rem; }
.ml05rem { margin-left: 0.5rem; }
.mb05rem { margin-bottom: 0.5rem; }
.mr05rem { margin-right: 0.5rem; }
.mlr05rem { margin: 0 0.5rem; } 
.m15rem { margin: 1.5rem; }
.mt15rem { margin-top: 1.5rem; }
.ml15rem { margin-left: 1.5rem; }
.mb15rem { margin-bottom: 1.5rem; }
.mr15rem { margin-right: 1.5rem; }
.m2rem { margin: 2rem; }
.mt2rem { margin-top: 2rem; }
.ml2rem { margin-left: 2rem; }
.mb2rem { margin-bottom: 2rem; }
.mr2rem { margin-right: 2rem; }
.m25rem { margin: 2.5rem; }
.mt25rem { margin-top: 2.5rem; }
.ml25rem { margin-left: 2.5rem; }
.mb25rem { margin-bottom: 2.5rem; }

/* margins tied to root element font-size that are hidden on mobile */

.xs-none-m05rem { margin: 0.5rem; }
.xs-none-mt05rem { margin-top: 0.5rem; }
.xs-none-ml05rem { margin-left: 0.5rem; }
.xs-none-mb05rem { margin-bottom: 0.5rem; }
.xs-none-mr05rem { margin-right: 0.5rem; }
.xs-none-mlr05rem { margin: 0 0.5rem; } 
.xs-none-m15rem { margin: 1.5rem; }
.xs-none-mt15rem { margin-top: 1.5rem; }
.xs-none-ml15rem { margin-left: 1.5rem; }
.xs-none-mb15rem { margin-bottom: 1.5rem; }
.xs-none-mr15rem { margin-right: 1.5rem; }
.xs-none-m2rem { margin: 2rem; }
.xs-none-mt2rem { margin-top: 2rem; }
.xs-none-ml2rem { margin-left: 2rem; }
.xs-none-mb2rem { margin-bottom: 2rem; }
.xs-none-mr2rem { margin-right: 2rem; }
.xs-none-m25rem { margin: 2.5rem; }
.xs-none-mt25rem { margin-top: 2.5rem; }
.xs-none-ml25rem { margin-left: 2.5rem; }
.xs-none-mb25rem { margin-bottom: 2.5rem; }



/*used to hide margin only on mobile screens*/
@media (max-width: 767px) {
	.xsmb0 {
		margin-bottom: 0;
	}
}

/*used to create margin only on mobile*/
@media (max-width: 767px) {
	.xsmb10 {
		margin-bottom: 10px;
	}
}

/*used for some articles to fix floated images*/
.margin-fix-left {
     margin-right: 15px;
}
.margin-fix-right {
     margin-left: 10px;
}

@media (max-width: 767px) {
     .margin-fix-left,
     .margin-fix-right {
          margin: 0 auto;
     }
}


/*NOTE -- COLORS */

.blue { color: blue; }
.lblue { color: #688efc; }
.pinblue { color: #1675bb /*3855c9  161954*/; }
.adablue { color: #3e8abf; }
.psgblue { color: #01079b; }
.brown { color: #663300; }
.orange {
     color: /*#de5927*/
     #CD4B00;
}
.darkred { color: #d9050b; }
.grey { color: #AAAAAA; }
.darkgrey { color: #9d9d9d; }
.green { color: green; }
.gold { color: #c8981e; }
.red { color: red; }
.maroon { color: #730b1a; }
.pink { color: #c7006b; }
.purple { color: #7745CF; }
.black { color: #000000; }
.white { color: #FFFFFF; }
.yellow { color: #ffa600; }
/*FUTURE - these are the same so we can get rid of one when moving to templating system*/
.bgcolor { background-color: #eee; }
.bggray { background-color: #EEEEEE; }
/*FUTURE - added so we can use same background-color as below without left text align - did not want to remove text align from .bggrey to avoid messing up the many pages it is currently used on (can be removed when moving to templating system - 10/29/13 ~CKM */
.bggrey {
     background-color: #EEEEEE;
     text-align: left;
}
.bglightgray { background-color: rgba(238, 238, 238, 0.4); }
.bglightblue { background-color: rgba(0, 102, 204, 0.08); }
.bgyellow { background-color: #ffffe6; }
.bgorange { background-color: rgba(204, 102, 0, 0.5); }
.bggreen { background-color: #e5ffe5; }
.bglightbrown { background-color: #F5ECCE; }
.bgshipnote { background-color: rgba(245, 233, 253, 0.75) /*#f5e9fd*/ ; }
.bgwhite { background-color: #ffffff !important; }
.mobile-header-color {color: rgb(183, 128, 78)}
.desktop-header-color {color: red}

/*NOTE -- ALIGNMENT***/

.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.justify { text-align: justify; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.left-right { text-align: left; }
.center-right, .center-left { text-align: center; }
.flex-center { justify-content: center; }
.flex-start { justify-content: start; }
.flex-end { justify-content: end; }
.flex-self-end { align-self: flex-end; }
.flex-between {justify-content: space-between;}
.flex-evenly { justify-content: space-evenly; }
.flex-wrap { flex-wrap: wrap !important;}
.flex-grow-1x { flex-grow: 1; }
.flex-grow-2x { flex-grow: 2; }
.flex-grow-3x { flex-grow: 3; }
.flex-shrink-1x { flex-shrink: 1; }
.flex-shrink-2x { flex-shrink: 2; }
.flex-shrink-3x { flex-shrink: 3; }
.right-center { text-align: right; }
.left-center { text-align: left; }
.nowrap { white-space: nowrap; }
.nwrap { white-space: nowrap; }
.nwrap-md {white-space: nowrap; }
.leftfloat { float: left; }
.rightfloat { float: right; }
.clearfloat { clear: both; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex {display: flex;}
.inline-flex {display: inline-flex};
.li-inline { display: inline; }
.list-sm, .list-sm.last { display: inline-block; }
.list-sm:after { content: " - "; }
.list-sm.last:after { content: ""; }
.align-content-center { align-content: center; }
.align-items-center { align-items: center; }
.align-self-center {align-self: center;}
.align-self-end {align-self: end;}
.align-items-baseline {align-items:  baseline;}

.flex-col {flex-flow: column;}
.flex-row {flex-flow: row;}


@media (min-width: 768px) and (max-width: 959px) {
	 .left-right {
		 text-align: right;
	 }
     .right-center,
     .left-center {
          text-align: center;
     }
     .nwrap-md {
          white-space: nowrap;
     }
}

@media (max-width: 767px) {
     .li-inline::after {
          content: " - ";
     }
     .list-sm, .list-sm.last {
          display: block;
     }
     .list-sm:after {
          content: "";
     }
	 .left-right {
		 text-align: right;
	 }
     .right-center,
     .left-center {
          text-align: center;
     }
     .center-right {
          text-align: right;
     }
     .center-left {
          text-align: left;
     }
}

/*If you want an element to remain floated on small screens, use these*/
.smleftfloat { float: left; }
.smrightfloat { float: right; }

@media (max-width: 960px) {
     .nwrap {
          white-space: normal;
     }
}

@media (max-width: 767px) {
     .leftfloat {
          float: none;
     }
     .rightfloat {
          float: none;
     }
     .nwrap, .nwrap-md {
          white-space: normal;
     }
}

/*NOTE -- INDEX CONTAINERS & FLOATS*/

@media (min-width: 768px) {
	.index-container > .smleftfloat.w25:nth-child(4n+1),
	.index-container > .smleftfloat.w20:nth-child(5n+1),
	.index-container > .smleftfloat.w16:nth-child(6n+1) {
		clear: both;
	}
}

@media (max-width: 767px) {
	.index-container > .smleftfloat.w25:nth-child(2n+1),
	.index-container > .smleftfloat.w20:nth-child(3n+1),
	.index-container > .smleftfloat.w16:nth-child(3n+1)	{
		clear: both;
	}
}

.index-nav {
	font-size: 0.875em;
}
.index-nav ul { 
	list-style-type: none;
	padding-left: 0;
	display: inline; 
}
.index-nav li {
	display: inline-block;
	margin: 0.25em;
}

/*NOTE -- GLYPHICONS, ICONS & SYMBOLS***/

.caret {
     display: inline-block;
     width: 0;
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
     border-top: 4px solid;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
}

@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 400;
	src: url("/include/fonts/fa-regular-400.eot");
	src: url("/include/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("/include/fonts/fa-regular-400.woff2") format("woff2"), url("/include/fonts/fa-regular-400.woff") format("woff"), url("/include/fonts/fa-regular-400.ttf") format("truetype"), url("/include/fonts/fa-regular-400.svg#fontawesome") format("svg"); 
     font-display: fallback;
}
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("/include/fonts/fa-solid-900.eot");
  src: url("/include/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/include/fonts/fa-solid-900.woff2") format("woff2"), url("/include/fonts/fa-solid-900.woff") format("woff"), url("/include/fonts/fa-solid-900.ttf") format("truetype"), url("/include/fonts/fa-solid-900.svg#fontawesome") format("svg"); 
  font-display: swap;
}


.far {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400; 
}

.fa, .fas {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
}
  
.fa,
.fas,
.far,
.fal,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; 
}

.fa-xs { font-size: .75em; }
.fa-sm { font-size: .875em; }
.fa-lg { font-size: 1.25em; }
.fa-1x { font-size: 1.5em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }
.fa-5x { font-size: 5em; }
.fa-6x { font-size: 6em; }
.fa-7x { font-size: 7em; }
.fa-8x { font-size: 8em; }
.fa-9x { font-size: 9em; }
.fa-10x { font-size: 10em; }

.fa-fw { 
	text-align: center;
	width: 1.25em; 
}

.fa-ul {
	list-style-type: none;
	margin-left: 2.5em;
	padding-left: 0; 
}
.fa-ul > li {
	position: relative; 
}

.fa-li {
	left: -2em;
	position: absolute;
	text-align: center;
	width: 2em;
	line-height: inherit; 
}

.fa-border {
	border: solid 0.08em #eee;
	border-radius: .1em;
	padding: .2em .25em .15em; 
}

.fa-shadow {
	text-shadow:
		-1px -1px 1px #000,
		1px -1px 1px #000,
		-1px 1px 1px #000,
		1px 1px 1px #000;
}

.fa-flip-horizontal {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1); 
}

.fa-flip-vertical {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
	-webkit-transform: scale(1, -1);
	transform: scale(1, -1); 
}

.fa-flip-horizontal.fa-flip-vertical {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1); 
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
	-webkit-filter: none;
	filter: none; 
}
.fa-arrow-down:before { content: "\f063"; }
.fa-arrow-down:before { content: "\f063"; }
.fa-arrow-left:before { content: "\f060"; }
.fa-arrow-right:before { content: "\f061"; }
.fa-arrow-up:before { content: "\f062"; }
.fa-asterisk:before { content: "\f069"; }
.fa-ban:before { content: "\f05e"; }
.fa-bath:before { content: "\f2cd"; }
.fa-box-open:before { content: "\f49e"; }
.fa-calculator:before { content: "\f1ec"; }
.fa-calendar-alt:before { content: "\f073"; }
.fa-camera:before { content: "\f030"; }
.fa-caret-down:before { content: "\f0d7"; }
.fa-caret-up:before { content: "\f0d8"; }
.fa-caret-left:before { content: "\f0d9"; }
.fa-caret-right:before { content: "\f0da"; }
.fa-check:before { content: "\f00c"; }
.fa-check-circle:before { content: "\f058"; }
.fa-check-square:before { content: "\f14a"; }
.fa-chevron-circle-down:before { content: "\f13a"; }
.fa-chevron-circle-left:before { content: "\f137"; }
.fa-chevron-circle-right:before { content: "\f138"; }
.fa-chevron-circle-up:before { content: "\f139"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-chevron-left:before { content: "\f053"; }
.fa-chevron-right:before { content: "\f054"; }
.fa-chevron-up:before { content: "\f077"; }
.fa-clipboard:before { content: "\f328"; }
.fa-close:before, .fa-times:before { content: "\f00d"; }
.fa-cut:before { content: "\f0c4"; }
.fa-dot-circle:before { content: "\f192"; }
.fa-download:before { content: "\f019"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-exchange-alt:before { content: "\f362"; }
.fa-exclamation:before { content: "\f12a"; }
.fa-exclamation-circle:before { content: "\f06a"; }
.fa-exclamation-triangle:before { content: "\f071"; }
.fa-file:before { content: "\f15b"; }
.fa-file-alt:before { content: "\f15c"; }
.fa-fire:before { content: "\f06d"; }
.fa-flag:before { content: "\f024"; }
.fa-gift:before { content: "\f06b"; }
.fa-globe:before { content: "\f57d"; }
.fa-grin:before { content: "\f580"; }
.fa-hand-holding-usd:before { content: "\f4c0"; }
.fa-heart:before { content: "\f004"; }
.fa-heartbeat:before { content: "\f21e"; }
.fa-home:before { content: "\f015"; }
.fa-info-circle:before { content: "\f05a"; }
.fa-leaf:before { content: "\f06c"; color: #00b300; }
.fa-lightbulb:before { content: "\f0eb"; }
.fa-lock:before { content: "\f023"; }
.fa-paint-brush:before { content: "\f1fc"; }
.fa-palette:before { content: "\f53f"; }
.fa-paperclip:before { content: "\f0c6"; }
.fa-pencil-alt:before { content: "\f303"; }
.fa-phone:before { content: "\f095"; }
.fa-plane:before { content: "\f072"; }
.fa-plus:before { content: "\f067"; }
.fa-plus-circle:before { content: "\f055"; }
.fa-print:before { content: "\f02f"; }
.fa-question:before { content: "\f128"; }
.fa-question-circle:before { content: "\f059"; }
.fa-quote-left:before { content: "\f10d"; }
.fa-quote-right:before { content: "\f10e"; }
.fa-rocket:before { content: "\f135"; }
.fa-search:before { content: "\f002"; }
.fa-shopping-basket:before { content: "\f291"; }
.fa-shopping-cart:before { content: "\f07a"; }
.fa-shower:before { content: "\f2cc"; }
.fa-snowflake:before { content: "\f2dc"; }
.fa-square:before { content: "\f0c8"; }
.fa-star:before { content: "\f005"; }
.fa-sun:before { content: "\f185"; }
.fa-tag:before { content: "\f02b"; }
.fa-tags:before { content: "\f02c"; }
.fa-tasks:before { content: "\f0ae"; }
.fa-thumbtack:before { content: "\f08d"; }
.fa-tint:before { content: "\f043"; }
.fa-trash-alt:before { content: "\f2ed"; }
.fa-truck:before { content: "\f0d1"; }
.fa-umbrella:before { content: "\f0e9"; }
.fa-warning:before { content: "\f071"; }
.fa-wheelchair:before { content: "\f193"; }
.fa-wrench:before { content: "\f0ad"; }
.fa-video:before { content: "\f03d"; }

/*FOR PROP 65 WARNING*/

.warning-prop65 {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1; 
	color: yellow; 
	font-size: 1.1em;
	text-shadow:
		-1px -1px 1px #000,
		1px -1px 1px #000,
		-1px 1px 1px #000,
		1px 1px 1px #000;
}
.warning-prop65:before { content: "\f071"; } 

/*NOTE -- HINTS, TIPS, ETC. for Articles*/
/*ADD THIS as an inline style sheet at the top of the article when using the hints, tips, etc. in a list
ul.ml0 li {
     padding-left: 0;
     margin-left: 2em;
}*/
ul.ml0 li.pro-tip, ul.ml0 li.note, ul.ml0 li.hint, ul.ml0 li.warning, ul.ml0 li.idea {
     padding-left: 0;
     margin-left: 0;
}
.pro-tip, .note, .hint, .warning, .idea, li.pro-tip, li.note, li.hint, li.warning, li.idea {
     font-style: italic;
     font-size: 0.9em; 
}
li.pro-tip, li.note, li.hint, li.warning, li.idea {
     list-style-type: none;
     margin-left: 0.5em;
}
.pro-tip b, li.pro-tip b {
     color: #7745CF;
}
.note b, li.note b {
     color: green;
}
.hint b, li.hint b {
     color: #d96905;
}
.warning b, li.warning b {
     color: #cc0000;
}
.idea b, li.idea b {
     color: #ffa600;
}
.pro-tip:before, li.pro-tip:before {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-size: 1.15em;     
     font-weight: 900;
     content: "\f0ad";
     margin-right: 0.25em;
     vertical-align: bottom;
     color: #7745CF;
}
.note:before, li.note:before {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-size: 1.15em;     
     font-weight: 900;
     content: "\f08d";
     margin-right: 0.25em;
     vertical-align: bottom;
     color: green;
}
.hint:before, li.hint:before {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-size: 1.15em;     
     font-weight: 900;
     content: "\f303";
     margin-right: 0.25em;
     vertical-align: bottom;
     color: #d96905;
}
.warning:before, li.warning:before {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-size: 1.15em;     
     font-weight: 900;
     content: "\f071";
     margin-right: 0.25em;
     vertical-align: bottom;
     color: #cc0000;
}
.idea:before, li.idea:before {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-size: 1.15em;     
     font-weight: 400;
     content: "\f0eb";
     margin-right: 0.25em;
     vertical-align: bottom;
     color: #ffa600;
}
     
/*NOTE -- IMAGES */ 
img {
     border: none;
}

.img-responsive {
     display: block;
     max-width: 95%;
     height: auto;
}
.img-responsive-sm {
     display: block;
     max-width: 65%;
     height: auto;
}

@media (max-width: 960px) {
	.img-responsive, .img-responsive-sm {
		max-width: 85%;
	}
}

/*use for toilet images*/
.img-thumbnail {
     padding: 4px;
     line-height: 1.42857143;
     background-color: #ffffff;
     border: 1px solid #dddddd;
     border-radius: 4px;
     -webkit-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     display: inline-block;
     max-width: 90%;
     height: auto;
}

.index-img {
     padding: 4px;
     line-height: 1.42857143;
     border: 1px solid #dddddd;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     display: inline-block;
     max-width: 85%;
     height: auto;
}
.index-img.big {
	max-width: 90%;
}
@media (max-width: 767px) {
	.index-img.big {
		max-width: 97%;
	}
}

/*use for large index images that go at the top of each section*/
.index-big {
	width: 35%;
}
@media (max-width: 767px) {
	.index-big {
		float: none;
		width: 95%;
		margin: 0 auto;
	}
}

.center-block {
     display: block;
     margin-left: auto;
     margin-right: auto;
}

/*for videos*/
@media (max-width: 767px) {
     .video-container {
         position: relative;
         padding-bottom: 56.25%;
         padding-top: 35px;
         height: 0;
         overflow: hidden;
     }

     .video-container iframe {
         position: absolute;
         top:0;
         left: 0;
         width: 100%;
         height: 100%;
     }
}

/* .video-container:after {
     pointer-events: none;
     position: absolute;
     top: 45%; left: 50%;
     transform: translate(-50%,-50%);
     width: 96px;
     height: 96px;
     background-size: cover;
     content: '';
} */

/*for bottom link images*/
.bottom-links-container {
     width: 85%;
     margin: 0 auto;
     margin-bottom: 3em;
     text-align: center;
     font-size: 0.6875em; 
}

.bottom-link {
	float: left;
	width: 12.5%;
	margin: 0 auto;
}

.bottom-link img {
	border-color: /*#c8c7c7*/ #dddddd;
	border-style:solid;
	border-width:1px;
	border-collapse:collapse;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	padding:3px;
	margin:0 auto;
	height: 80px;
}

@media (max-width: 960px) {
	.bottom-link img{
		height: 50px;
		padding: 1px;
	}
}

@media (max-width: 767px) {
     .bottom-links-container {
          width: 97%;
     }
	.bottom-link {
		width: 90%;
		float: none;
		font-size: 1.25em;
		display: block;
		text-align: left;
		margin: 10px auto;
	}
	.bottom-link img {
		display: none;
	}
	.bottom-link br {
		display: none;
	}
}

/*NOTE -- BUTTONS & FORM CONTROLS*/

/* hides the spin-button for firefox */
input[type=number] {
    -moz-appearance:textfield;
}
/* hides the spin-button for chrome*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
     -webkit-appearance: none;
     cursor: pointer;
     font-family:helvetica;
}

input[type="text"] {
     font-size: 16px !important;
}

input[type="checkbox"], input[type="radio"] {
     font-size: 1.15em;
     height: 1.1em;
     width: 1.1em;    
     vertical-align: -20%;
}

input:focus {
     outline: none;
}

input::-ms-clear {
     display: none;
}

.form-control {
	width: 220px;
	margin: 5px auto;
}

.label {
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	margin: 4px 0;
}

.select {
     display: block;
     float: right;
     min-width: 65%;
     max-width: 97%;
}

.quantitybox {
     border: 1px solid #AAA;
     border-radius: 2px;
     text-align: center;
     /*padding: 0.25em;*/
	 padding: 1px;
     max-width: 43px;
     vertical-align: baseline;
     font-size: 16px;
}

.quantitybox-signs {
     display: flex;
     align-self: center;
     border: 1px solid #AAA;
     border-radius: 2px;
     text-align: center;
     padding: 2px;
     width: 43px;
     justify-content: center;
     font-size: 30px;
     text-decoration: none;
     color: black
}
.quantitybox-signs:visited {
     color: black;
}

/*big orange add/view buttons*/
.btn-addview {
	color: white;
	font-size: 14pt;
	font-weight:bold;
	background-color: #e86c2e;
	width: 113px;
	border: 1px solid #c86004;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	cursor: pointer;
	display: inline-block;
	margin: 5px;
	padding: 5px;
	text-align: center;
	vertical-align: center;
	text-decoration:none;
	position: relative;
     -webkit-box-shadow: 0px 2px 14px -3px rgba(117,117,117,1);
     -moz-box-shadow: 0px 2px 14px -3px rgba(117,117,117,1);
     box-shadow: 0px 2px 14px -3px rgba(117,117,117,1);
}
input.btn-addview {
	width: 125px;
}
@-moz-document url-prefix() {
	a.btn-addview {
		padding: 6px 5px;
	}
}
a.btn-addview {
	color: white;
}
.btn-addview:hover,
.btn-addview:focus,
.btn-addview:active {
     color: #fff;
     background-color: #1675bb;
     border-color: #3e8abf;
}
.btn-addview a:visited {
	color:#000;
}
@media (max-width: 767px) {
	a.btn-addview {
		width: 88px;
		font-size: 15px;
		padding: 5px;
	}
	input.btn-addview {
		width: 100px;
		font-size: 15px;
	}
}

/*Small blue add + buttons*/
.btn-blueadd-sm {
	color: #fff;
	font-size:1.05em;
	font-weight:bold;
	line-height: 1em;
	background-color: #1675bb;
	border: 1px solid #3e8abf;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	cursor: pointer;
	display: inline-block;
	margin: 0px 5px 0px 3px;
	padding: 0.25em 0.75em;
	text-align: center;
	vertical-align: middle;
	text-decoration:none;
	position: relative;
}
a.btn-blueadd-sm {
	color: #ffff00;
}
.btn-blueadd-sm:hover,
.btn-blueadd-sm:focus {
     color: #fff;
     background-color: #d96905;
     border-color: #c86004;
}
.btn-blueadd-sm a:visited {
	color:#000;
}
.blueadd {
	color: #1675bb;
	font-size:1.55em;
	font-weight:bold;
	/*text-shadow: 1px 1px 2px #3e8abf;*/
	line-height: 1em;
	cursor: default;
	text-align: center;
	vertical-align: middle;
	text-decoration:none;
}
.btn-hover {
	text-decoration: none;
}
.btn-hover:hover .blueadd {
	color: #d96905;
}
.btn-hover:hover .btn-blueadd-sm {
	color: #fff;
	background-color: #d96905;
	border-color: #c86004;
}


/*Small orange add + buttons*/
.btn-orangeadd-sm, .btn-orangeview-sm {
	color: #000000;
	font-size:1.05em;
	font-weight:bold;
	line-height: 1em;
	background-color: #FF8A24;
	border: 1px solid #c86004;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	cursor: pointer;
	display: inline-block;
	margin: 0 0.1em 0 0.25em;
	padding: 0.25em 0.75em;
	text-align: center;
	/*vertical-align: middle;*/
	text-decoration:none;
	position: relative;
}
.btn-orangeview-sm {
     padding: 0.258em 0.75em;
     width: 75px;
}
a.btn-orangeadd-sm {
	color: #ffff00;
}
.btn-orangeadd-sm:hover, .btn-orangeview-sm:hover,
.btn-orangeadd-sm:focus, .btn-orangeview-sm:focus {
	color: #fff;
	background-color: #1675bb;
	border-color: #3e8abf;

}
.btn-orangeadd-sm a:visited {
	color:#000;
}
.orangeadd {
	color: #CD4B00;
	font-size:1.05em;
	font-weight:bold;
	/*text-shadow: 1px 1px 1px #000;*/
	line-height: 1em;
	cursor: default;
	text-align: center;
	vertical-align: middle;
	text-decoration:none;
}
.addsm .btn-orangeadd-sm {
     margin-right: 0;
}
.btn-hover:hover .orangeadd {
	color: #1675bb;
}
.btn-hover:hover .btn-orangeadd-sm {
	color: #fff;
	background-color: #1675bb;
	border-color: #c86004;
}


.btn-special {
     color: #000000;
	font-weight:bold;
	background-color: #FF8A24;
	border: 1px solid #c86004;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	cursor: pointer;
	display: inline-block;
	margin: 0 0.1em 0 0.25em;
	padding: 0.25em 0.75em;
	text-align: center;
	text-decoration:none;
	position: relative;
     color: black;
	background-color: #f07000;
	border-color: #cf6100;
     height: 32px;
     align-self: center;
}

.btn-special * {
     padding: .2rem;
     align-self: center;
}

.btn-special > input {
     background-color: #f07000;
	border-color: #cf6100;
     border-style: none;
     font-size: 16px;
     font-family: sans-serif;
     font-weight: bold;
}

.btn-special > i {
     color: black;
}

.btn-special:hover .orangeadd {
	color: #CD4B00;
}








/*FUTURE -- need to evaluate this button, used to view toilet parts links on mobile instead of large xml menu - doesn't match any of our other buttons*/
.btn {
     background: #d6d6d6;
     background-image: linear-gradient(to bottom, #f0f0f0, #d6d6d6);
     background-repeat: repeat-x;
     /*background-image: linear-gradient(to bottom, #d6e9fe, #aed3fe);*/
     border: 1px solid #707070;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     color: #333333;
     cursor: pointer;
     display: inline-block;
     font-size: 14px;
     line-height: 19px;
     margin: 8px 3px 5px 10px;
     padding: 1px 6px;
     text-align: center;
     vertical-align: bottom;
     text-decoration:none;
     font-weight: normal;
     position: relative;
}
.btn:hover {
     background-image: linear-gradient(to bottom, #d6e9fe, #aed3fe);
     background-repeat: repeat-x;
     border: 1px solid #3c7fb1;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     color: #333333;
}
.tp-btn {
	width: 80%;
	color: #fff;
     background-color: #1675bb;
     border: 1px solid #3e8abf;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	cursor: pointer;
     display: inline-block;
     font-size: 14px;
     line-height: 19px;
     margin: 5px;
     padding: 5px;
     text-align: center;
     vertical-align: bottom;
     text-decoration:none;
     font-weight: bold;
     position: relative;
}
.tp-btn:hover {
	background-color: #d96905;
	border: 1px solid #c86004;
}

/*button for fittings pages top links*/
.btn-link {
	width: 95px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	line-height: 19px;
	margin: 8px 3px 5px 10px;
	padding: 1px 6px;
	text-align: center;
	vertical-align: bottom;
	font-weight: normal;
	position: relative;
}
@media (max-width: 767px) {
	.btn-link {
		width: 95px;
		background-image: linear-gradient(to bottom, #f0f0f0, #ebebeb);
		background-repeat: repeat-x;
		border: 1px solid #707070;
		border-radius: 0.25em;
           -moz-border-radius: 0.25em;
           -webkit-border-radius: 0.25em;
		color: #333333;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		line-height: 19px;
		margin: 8px 3px 5px 10px;
		padding: 1px 6px;
		text-align: center;
		vertical-align: bottom;
		text-decoration:none;
		font-weight: normal;
		position: relative;
	}
	.btn-link:hover {
		background-image: linear-gradient(to bottom, #d6e9fe, #aed3fe);
		background-repeat: repeat-x;
		border: 1px solid #3c7fb1;
		border-radius: 0.25em;
           -moz-border-radius: 0.25em;
           -webkit-border-radius: 0.25em;
		color: #333333;
	}
	a.btn-link {
		color: #333333;
	}
}

.calc-button {
	color: #fff;
	background-color: #1675bb;
	border: 1px solid #3e8abf;
	font-size: inherit;
	font-weight: bold;
	width: auto;
	border-radius: 3px;
	cursor: pointer;
	display: inline;
	margin: 0 0.5em;
	padding: 5px 7px;
	text-align: center;
	vertical-align: center;
	text-decoration: none;
}
.calc-button:hover {
	background-color: #d96905;
	border: 1px solid #c86004;
}

/*NOTE -- MENU***/

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
     .navbar {
          display: none;
     }
}

.container-fluid {
     margin-right: auto;
     margin-left: auto;
     padding-left: 15px;
     padding-right: 15px;
}

.navbar {
     font-size: 14px;
     position: relative;
     background-color: #eee;
}

@media (max-width: 767px) {
     .container-fluid {
          padding-left: 0;
          padding-right: 0;
     }
}

@media screen and (max-width: 767px) {
     .navbar {
          margin: 6px 0 0 0;
     }
}


/*NOTE -- COLLAPSE TOGGLES - Required for menu and responsive tables***/

.collapse {
     display: none;
     visibility: hidden;
}

.collapse.in {
     display: block;
     visibility: visible;
}

tr.collapse.in {
     display: table-row;
}

tbody.collapse.in {
     display: table-row-group;
}

.collapsing {
     position: relative;
     height: 0;
     overflow: hidden;
     -webkit-transition-property: height, visibility;
     -o-transition-property: height, visibility;
     transition-property: height, visibility;
     -webkit-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     transition-duration: 0.35s;
     -webkit-transition-timing-function: ease;
     -o-transition-timing-function: ease;
     transition-timing-function: ease;
}

.collapse-xs {
     display: none;
}


/*NOTE -- MAIN DROPDOWN TOGGLES***/

.dropdown {
     position: relative;
}

.dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1000;
     display: none;
     float: left;
     min-width: 160px;
     padding: 5px 0;
     margin: 2px 0 0;
     list-style: none;
     font-size: 14px;
     text-align: left;
     background-color: #ffffff;
     border: 1px solid #eee;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
}

.dropdown-menu .divider {
     height: 1px;
     margin: 9px 0;
     overflow: hidden;
     background-color: #e5e5e5;
}

.dropdown-menu > li > a {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: 1.42857143;
     color: #000;
     white-space: nowrap;
     text-decoration: none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
     text-decoration: none;
     color: #262626;
     background-color: #eee;
}

.open > .dropdown-menu {
     display: block;
}


.dropdownbox-obscure {
     border-style: none;
     padding: 4px 0px 0px 4px;
     font-size: 14px;
     line-height: 1.42857143;
     color: #bfbfbf;
     background-color: #fff;
     background-image: none;
     margin: 0px;
}

.dropdownbox-obscure a, .dropdownbox-obscure a:visited {
     text-decoration: none;
     color: #bfbfbf;
}


/*NOTE -- For dropdown boxes used on product pages in place of select element*/
.form-control, .dropdownbox, .dropdownbox-table {
    display: inline-block;
    margin: 0 auto 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control, .dropdownbox, .dropdownbox-table {
    padding: 4px 7px 4px 5px;
    font-size: 14px;
    line-height: 1.42857143;
    color: black;
    background-color: #fff;
    background-image: none;
    max-width: 90%;
    margin: 0px auto;
}


.dropdownbox-table {
	max-width: 95%;
	width: 100%;
	padding: 2px;
}
.dropdownbox a, .dropdownbox-table a {
	text-decoration: none;
	color: black;
}
.dropdownbox a:visited, .dropdownbox-table a:visited {
	color: black;
}
.dropdownbox a.psgblue,  {
	color: #01079b;
	text-decoration: underline;
}
.dropdownbox a.dropdown-toggle, .dropdownbox-table a.dropdown-toggle, .dropdownbox-obscure a.dropdown-toggle {
	width: 100%;
	display: inline-block;
}
.dropdown-menu.product {
	padding: 10px !important;
	margin: 0 !important;
	left: -2px !important;
	color: black;
}
.dropdown-menu.table-menu.product {
	left: -150px !important;
}
.dropdown-menu.table-menu {
	min-width: 250px;
}
.dropdown-menu.product li a {
	display: inline-block;
	padding: 0;
	color: #01079b;
	text-decoration: underline;
}
.dropdown-menu.product li a:hover {
	background-color: transparent;
	color: #d96905;
	text-decoration: underline;
}
.dropdown-menu.product li a:visited {
	color: #609;
}
.dropdownbox li.dropdown.open a.dropdown-toggle, .dropdownbox-table li.dropdown.open a.dropdown-toggle, .dropdownbox-obscure li.dropdown.open a.dropdown-toggle {
	color: #d96905;
}
ul.product {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
.product li {
	clear: both;
	margin-bottom: 0.5em;
}
.product li:last-child {
	margin-bottom: 0;
}
.dropdown-check {
	display: inline-block;
	float: right;
	text-align: right;
}
@media (max-width: 767px) {
	.dropdownbox-table {
		width: 60%;
		text-align: center;
	}
	a .fa {
		border-bottom: none !important;
	}
	.dropdown-menu.product {
		min-width: 95% !important;
	}
	.dropdown-menu.table-menu.product {
		left: -100px !important;
	}
	.dropdown-menu.product.w110p:not(.table-menu), .dropdown-menu.product.w120p:not(.table-menu), .dropdown-menu.product.w130p, .dropdown-menu.product.w140p, .dropdown-menu.product.w150p, .dropdown-menu.product.w200p {
		width: inherit;
	}
}

@media (min-width: 768px) {
	.dash-add[itemprop="offers"] [itemprop="name"]:after, .dash-add[itemprop="offers"] [itemprop="mpn"]:after, span.dash-add:after {
		content: " - ";
	}
}
@media (max-width: 767px) {
	.dash-add[itemprop="offers"] [itemprop="name"] {
		display: inline-block;
		margin-bottom: 0.25em;
	}
	.dash-add[itemprop="offers"] [itemprop="mpn"], span.dash-add {
		display: block;
		margin-bottom: 0.25em;
	}
}

/*NOTE -- ACCORDIONS*/

.toggle {
	margin-bottom: .25em;
	background-color: #ffffff;
	border-bottom: 3px solid #eee;
}
.toggle.last {
	border-bottom: none;
}
.toggle-body {
	padding: 15px;
}
.toggle-heading {
	padding: 10px 15px;
}
.toggle-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size:  0.9375em;
	cursor: pointer;
}
.toggle-title > a {
	color: #1675bb !important;
}
.accordion-toggle:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f077";    
	margin-left: 0.5em;
	display: inline-block;
	vertical-align: top;
}
.collapsed.accordion-toggle:after {    
	content: "\f078";    
}

@media (max-width: 767px) {
	.toggle-body {
		padding: 15px 5px;
	}
	.toggle-body ul {
		margin-left: 0;
		padding-left: 25px;
	}

	a .fa {
		border-bottom: none !important;
	}
}

/*NOTE -- ACTUAL CATEGORY MENUS INSIDE NAV BAR***/

.nav {
     margin-bottom: 0;
     padding-left: 0;
     list-style: none;
}

.nav > li {
     position: relative;
     display: block;
}

.nav > li > a {
     position: relative;
     display: block;
     padding: 5px 10px;
     text-decoration: none;
}

.nav > li > a:hover,
.nav > li > a:focus {
     text-decoration: none;
     background-color: #eeeeee;
}

.nav > li.disabled > a {
     color: #777777;
}

.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
     color: #777777;
     text-decoration: none;
     background-color: transparent;
     cursor: not-allowed;
}

.navbar-collapse {
     overflow-x: visible;
     padding-right: 5px;
     padding-left: 15px;
     border-top: 1px solid transparent;
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
     -webkit-overflow-scrolling: touch;
}

.navbar-collapse.in {
     overflow-y: auto;
}

@media (min-width: 768px) {
     .navbar-collapse {
          width: auto;
          border-top: 0;
          -webkit-box-shadow: none;
          box-shadow: none;
     }
     .navbar-collapse.collapse {
          display: block !important;
          visibility: visible !important;
          height: auto !important;
          padding-bottom: 0;
          overflow: visible !important;
          margin-left: -15px; /*needed to provide more room on iPad portrait*/
     }
     .navbar-collapse.in {
          overflow-y: visible;
     }
     .navbar-left {
          float: left;
     }
     .navbar-right {
          float: right;
          margin-right: -15px;
          padding-right: 5px;
     }
}

@media (min-width: 768px) and (max-width: 1023px) {
     .navbar-right {
          margin-right: -20px;
     }
}

.navbar-nav {
     float: left;
     margin: 0;
}

.navbar-nav > li {
     float: left;
}

.navbar-nav > li > a {
     padding-top: 10px;
     padding-bottom: 10px;
     line-height: 20px;
     color: #000;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
     color: #01079b;
}

.navbar-nav > li > .dropdown-menu {
     margin-top: 0;
     border-top-right-radius: 0;
     border-top-left-radius: 0;
}

.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
     color: #01079b;
     background-color: #fff;
}

/*NOTE -- MENU LINKS FOR MOBILE*/
.top-link {
	float: right;
	font-size: 14px;
	text-align: center;
}
.top-link a {
	color: #01079b;
	text-decoration: underline;
}
.top-link a:hover {
	color: #ff6600;
}


#mobilemenu .modal-title {
     font-weight: bold;
     color: #01079b;
     font-size: 1.2em;
}
#mobilemenu .modal-body {
     padding: 0;
}
#mobilemenu ul li {
     padding: 0.25em 0;
}
#mobilemenu li a {
     display: block;
     padding-left: 1em;
     clear: both;
     white-space: nowrap;
     text-decoration: none;
     color: black;
}
#mobileul > li:hover,
#moibleul > li:focus {
     text-decoration: none;
     color: #262626;
     background-color: #eee;
}

/*NOTE -- NEW MOBILE MENU 10/03/18*/
@media (max-width: 767px) {
	.navbar {
	  position: relative;
	  min-height: 50px;
	  margin-bottom: 20px;
	  border: none;
	  background-color: #ffffff;
	}
	.navbar-collapse {
	  padding-right: 15px;
	  padding-left: 15px;
	  overflow-x: visible;
	  -webkit-overflow-scrolling: touch;
	  border-top: 1px solid transparent;
	  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
			  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	}
	.navbar-collapse.in {
	  overflow-y: auto;
	}
	.navbar-brand {
	  float: left;
       align-self: end;
	  font-size: 16px;
	  font-weight: bold;
	  line-height: 10px;
	}
	a.navbar-brand {
          width: 65%;
		text-decoration: none;
	}

     .navbar-brand-container {
          display: flex;
          justify-content: start;
          margin-right: -0.5em;
          margin-left: 0.5em;
     }

	.navbar-toggle {
	  position: relative;
	  float: left;
	  padding: 0px 10px;
       margin-right: 0.5em;
       margin-left: 0.5em;
	  background-color: transparent;
	  background-image: none;
	  border: 1px solid transparent;
	  border-radius: 4px;
	}
	.navbar-toggle:focus {
	  outline: 0;
	}
	.navbar-toggle .icon-bar {
	  display: block;
	  width: 22px;
	  height: 2px;
	  border-radius: 1px;
	}
	.navbar-toggle .icon-bar + .icon-bar {
	  margin-top: 4px;
	}
	.navbar-nav {
	  margin: 7.5px -15px;
	  float: none;
	}
	.navbar-nav > li {
		float: none;
	}
	.navbar-nav > li > a {
	  padding-top: 10px;
	  padding-bottom: 10px;
	  line-height: 20px;
	}
	.navbar-nav .open .dropdown-menu > li.psg-nav-title > a {
		padding: 3px 15px 3px 0px;
		font-weight: bold;
	}
	.navbar-nav .open .dropdown-menu > li.psg-nav-title {
		padding: 5px 15px 3px 10px;
		font-weight: bold;
	}
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
	}
	.navbar-nav .open .dropdown-menu > li > a,
	.navbar-nav .open .dropdown-menu .dropdown-header {
		padding: 5px 15px 5px 25px;
	}
	.navbar-nav .open .dropdown-menu > li > a {
		line-height: 20px;
	}
	.navbar-nav > li > .dropdown-menu {
	  margin-top: 0;
	  border-top-left-radius: 0;
	  border-top-right-radius: 0;
	}
	.navbar-default .navbar-nav > li > a {
	  color: #777;
	}
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus {
	  color: #333;
	  background-color: transparent;
	}
	.navbar-default .navbar-nav > .active > a,
	.navbar-default .navbar-nav > .active > a:hover,
	.navbar-default .navbar-nav > .active > a:focus {
	  color: #555;
	  background-color: #e7e7e7;
	}
	.navbar-default .navbar-nav > .disabled > a,
	.navbar-default .navbar-nav > .disabled > a:hover,
	.navbar-default .navbar-nav > .disabled > a:focus {
	  color: #ccc;
	  background-color: transparent;
	}
	.navbar-default .navbar-toggle {
	  border-color: #ddd;
	}
	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {
	  background-color: #ddd;
	}
	.navbar-default .navbar-toggle .icon-bar {
	  background-color: #888;
	}
	.navbar-default .navbar-collapse,
	.navbar-default .navbar-form {
	  border-color: #e7e7e7;
	}
	.navbar-default .navbar-nav > .open > a,
	.navbar-default .navbar-nav > .open > a:hover,
	.navbar-default .navbar-nav > .open > a:focus {
	  color: #555;
	  background-color: #e7e7e7;
	}
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
	.navbar-default .navbar-link {
	  color: #777;
	}
	.navbar-default .navbar-link:hover {
	  color: #333;
	}
}

/*NOTE -- DROPDOWN SUBMENUS***/

.dropdown-submenu {
     position: relative;
}

.dropdown-submenu>.dropdown-menu {
     top: 0;
     left: 100%;
     margin-top: -6px;
     margin-left: -1px;
     -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px 6px;
     border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
     display: block;
}

.dropdown-submenu>a:after {
     display: block;
     content: " ";
     float: right;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
     border-width: 5px 0 5px 5px;
     border-left-color: #cccccc;
     margin-top: 5px;
     margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
     border-left-color: #ffffff;
}

/*NOTE -- PAGE TOP SECTIONS*/
.article-top {
	width: 90%;
	margin-top: 20px;
     margin-bottom: 0px;
     margin-left: auto;
     margin-right: auto;
}
@media (max-width: 767px) {
     .article-top {
          display: none;
     }
}

/*SOCIAL BUTTONS*/

.sharing {
	float: right;
	width: 20%;
	margin: 0 auto;
}
.sharing img {
	float: right;
	margin: 0 0.2em;
	height: 25px;
}
@media (max-width: 767px) {
	.sharing {
		width: 50%;
	}
}

/*BREADCRUMBS*/

.breadcrumbs {
	float: left;
	width: 80%;
}
.psg-breadcrumb {
     padding: 0;
     margin: 0;
     list-style: none;
}
.psg-breadcrumb > li {
     display: inline-block;
}
.psg-breadcrumb > li + li:before {
     padding: 0 3px;
     color: #ccc;
     content: "/\00a0";
}
.psg-breadcrumb > .active {
     color: #777;
}

/*NOTE -- MODAL DIALOGS*/

body.modal-open {
	padding-right: 17px;
	min-height: 100%;
}

.close {
     position: absolute;
     top: -10px;
     right: -15px;
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 6px;
     padding-bottom: 6px;
     border-radius: 1em;
	margin-left: 0.25em;
     font-size: 1.7em;
     font-weight: bold;
     line-height: 1;
     color: #b0acac;
     border-color: #a8a8a8a8;
}
.close:hover,
.close:focus {
     color: #000000;
     text-decoration: none;
     cursor: pointer;
}

.modal-open {
     overflow: hidden;
}
.modal {
     display: none;
     overflow: hidden;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1050;
     -webkit-overflow-scrolling: touch;
     outline: 0;
}
.modal.fade .modal-dialog {
     -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
     -o-transform: translate(0, -25%);
     transform: translate(0, -25%);
     -webkit-transition: -webkit-transform 0.3s ease-out;
     -o-transition: -o-transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     -o-transform: translate(0, 0);
     transform: translate(0, 0);
}
.modal-open .modal {
     overflow-x: hidden;
     overflow-y: auto;
}
.modal-dialog {
     position: relative;
     width: auto;
     margin: 20px 10px 10px 10px;
	 margin-bottom: 2.5em;
}
.modal-content {
     position: relative;
     background-color: #ffffff;
     border: 1px solid #999999;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     -webkit-background-clip: padding-box;
          background-clip: padding-box;
     outline: 0;
}
.modal-backdrop {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1040;
     background-color: #000000;
}
.modal-backdrop.fade {
     opacity: 0;
     filter: alpha(opacity=0);
}
.modal-backdrop.in {
     opacity: 0.2;
     filter: alpha(opacity=20);
}
.modal-header {
     padding: 15px;
}
.modal-header h4 {
     border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
     margin-top: -2px;
}
.modal-title {
     margin: 0;
     line-height: 1.42857143;
}
.modal-body {
     position: relative;
     padding: 15px 15px 25px;
}
/* .modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
} */

.table-flex-responsive {
     display: flex;
     flex-flow: row;
     justify-content: center;
}

@media (min-width: 1025px) {
     .modal-dialog {
          width: 900px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 1em;
     }
     .modal-content {
          -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     }
}
@media (min-width: 768px) and (max-width: 1024px) {
     .modal-dialog {
          width: 95%;
          margin: 3% auto;
     }
     .modal-content {
          -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     }
}
@media (max-width: 767px) {
	body.modal-open {
		padding-right: 0;
	}
}

/*NOTE -- TOOLTIPS*/
.tooltip-btn {
	border: none;
	border-color: transparent;
	background-color: transparent;
	padding: 0 1px;
	cursor: pointer;
}

.tooltip {
     position: absolute;
     z-index: 1070;
     display: block;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 13px;
     font-style: normal;
     font-weight: normal;
     line-height: 1.42857143;
     text-align: left;
     text-align: start;
     text-decoration: none;
     text-shadow: none;
     text-transform: none;
     letter-spacing: normal;
     word-break: normal;
     word-spacing: normal;
     word-wrap: normal;
     white-space: normal;
     filter: alpha(opacity=0);
     opacity: 0;
     line-break: auto;
}
.tooltip.in {
     filter: alpha(opacity=100);
     opacity: 1;
}
.tooltip.top {
     padding: 5px 0;
     margin-top: -3px;
}
.tooltip-inner {
     max-width: 250px;
     padding: 5px 8px;
     color: #fff;
     text-align: center;
     background-color: #404040;
     border-radius: 4px;
}
.tooltip-arrow {
     position: absolute;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
}
.tooltip.top .tooltip-arrow {
     bottom: 0;
     left: 50%;
     margin-left: -5px;
     border-width: 5px 5px 0;
     border-top-color: #404040;
}

@media (max-width: 767px) {
     a .fa {
          border-bottom: 1px dotted #5a5a5a;
     }
     a.menu-link .fa {
          border-bottom: none;
     }
}

[data-toggle="tooltip"] {
     border-bottom: 1px dotted #5a5a5a;
}
a[data-toggle="tooltip"] {
     text-decoration: none;
     color: inherit;
}

/*NOTE -- TABLES*/
table {
     max-width: 100%;
     background-color: transparent;
     font-size: 0.95em;
     text-align: left;
     border-style: solid;
     border-width: 1px;
     border-color: #c8c7c7;
     border-collapse: collapse;
}

table td, table th {
     border-style: solid;
     border-width: 1px;
     border-collapse: collapse;
     border-color: #c8c7c7;
     padding: 5px;
     margin: 0 auto;
     font-size: 14px;
}

table th {
     text-align: center;
     font-size: 0.85em;
}

.tablefloat {
	float: left;
	width: 50%;
	margin: 0 auto;
}


.th30 {
	width: 30%;
}

.th50 {
	width: 45%;
}

@media (max-width: 767px) {
	.tablefloat {
		float: none;
		width: 100%;
		margin: 0 auto;
		margin-top: 15px;
	}
	.th50, .th30 {
		width: 50%;
	}
     .mg05rem {
          margin: 0;
     }
     .table-flex-responsive {
          flex-flow: column;
     }
     /*table td {
          padding: 0.35em 0.4em;
     }*/
}


/*For tables that turn into individual boxes on mobile*/
.responsive-table {
     margin: 0 auto;
     margin-bottom: 1em;
}

  
@media (max-width: 767px) {
     table.w800, table.w825, table.w850, .responsive-table.w800, .responsive-table.w825, .responsive-table.w850 {
          width: 100%;
     }
     
     .responsive-table thead {
          display: none;
     }

    /* Set these items to display: block for narrow viewports */
     .responsive-table tbody, .responsive-table tr, .responsive-table th, .responsive-table td {
          display: block;
          text-align: left;
          white-space: normal;
          }

     .responsive-table td, .responsive-table td.center {
          border: none;
          text-align: right;
     }
	.responsive-table td.tdblock.center {
		text-align: center;
	}
	.responsive-table td.tdblock.left {
		text-align: left;
	}
	
	
     .responsive-table tr {
          border-bottom: 1px solid  #c8c7c7;
     }
     table.responsive-table tr:last-child {
          border-bottom: none;
     }
     
     .responsive-table td[scope="row"] {
          background-color: #eee;
          text-align: left;
          font-weight: bold;
          padding: 0.5em 0.25em;
     }
     
     .responsive-table td[scope="row"].bglightblue { background-color: rgba(0, 102, 204, 0.08); }
	
	.responsive-table td[scope="row"].normal { font-weight: normal; }

     .responsive-table td[data-title]:before {
          content: attr(data-title);
          float: left;
          padding-right: 3px;
          font-size: 1em;
          color: rgba(94,93,82,.75);
     }
     
     .responsive-table td[data-title].afterimg:after {
          content: attr(data-title);
          clear: both;
          float: left;
          padding-right: 3px;
          font-size: 1em;
          color: rgba(94,93,82,.75);
     }

     .responsive-table td[data-title].afterimg:before {
          content: none;
     }
     .responsive-table td.afterimg {
          text-align: right;
     }
	
	.responsive-table td.afterimg img {
		margin-bottom: 15px;
	}
}

/*for left-right scrolling tables*/
@media screen and (max-width: 767px) {
     .table-responsive {
          width: 100%;
          margin-bottom: 15px;
          overflow-y: hidden;
          -ms-overflow-style: -ms-autohiding-scrollbar;
     }
     .table-responsive > .table {
          margin-bottom: 0;
     }
     .table-responsive > .table > thead > tr > th,
     .table-responsive > .table > tbody > tr > th,
     .table-responsive > .table > tfoot > tr > th,
     .table-responsive > .table > thead > tr > td,
     .table-responsive > .table > tbody > tr > td,
     .table-responsive > .table > tfoot > tr > td {
          white-space: nowrap;
     }
     .table-responsive > .table-bordered {
          border: 0;
     }
     .table-responsive > .table-bordered > thead > tr > th:first-child,
     .table-responsive > .table-bordered > tbody > tr > th:first-child,
     .table-responsive > .table-bordered > tfoot > tr > th:first-child,
     .table-responsive > .table-bordered > thead > tr > td:first-child,
     .table-responsive > .table-bordered > tbody > tr > td:first-child,
     .table-responsive > .table-bordered > tfoot > tr > td:first-child {
          border-left: 0;
     }
     .table-responsive > .table-bordered > thead > tr > th:last-child,
     .table-responsive > .table-bordered > tbody > tr > th:last-child,
     .table-responsive > .table-bordered > tfoot > tr > th:last-child,
     .table-responsive > .table-bordered > thead > tr > td:last-child,
     .table-responsive > .table-bordered > tbody > tr > td:last-child,
     .table-responsive > .table-bordered > tfoot > tr > td:last-child {
          border-right: 0;
     }
     .table-responsive > .table-bordered > tbody > tr:last-child > th,
     .table-responsive > .table-bordered > tfoot > tr:last-child > th,
     .table-responsive > .table-bordered > tbody > tr:last-child > td,
     .table-responsive > .table-bordered > tfoot > tr:last-child > td {
          border-bottom: 0;
     }
}

/*Hack for responsive tables in Firefox*/
@-moz-document url-prefix() {
     fieldset { display: table-cell; }
}


.striped > tbody > tr:nth-of-type(even) {
     background-color: rgba(238, 238, 238, 0.4);
}

.striped > tbody > tr:nth-of-type(even).bglightblue {
	background-color: rgba(0, 102, 204, 0.08); 
}
@media (max-width: 767px) {
     .striped > tbody > tr:nth-of-type(even) {
          background-color: #ffffff;
     }
}

/*NOTE -- for tables built with divs*/
.table {
	display: table;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 1em !important;
	border: 1px solid #ddd;
	font-size: 0.95em;
	border-collapse: collapse;
}
.thead {
	display: table-header-group;
	vertical-align: middle;
	border-color: inherit;
	margin: 0 auto;
}
.tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
}
.th, .td { 
	display: table-cell;
	font-size: 0.9em;
	border: 1px solid #ddd;
	border-collapse: collapse;
	margin: 0 auto;
	padding: 5px;
	line-height: 1.42857143;
}
.th {
	font-weight: bold;
	font-size: 0.85em;
	text-align: center;
}
.table > .thead:first-child > .tr:first-child > .th { border-top: 0; }
.tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
	margin: 0 auto;
}
.table-border {
	border-color: #c7c7c7;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	margin: 0 auto;
}
.table-heading {
	background-color: #eee;
	padding: 5px 0;
	font-weight: bold;
	border-bottom: 1px solid #c7c7c7;
}
.table-head {
	background-color: #eee;
	font-weight: bold;
	font-size: 0.9em;
	border-bottom: 1px solid #c7c7c7;
	padding: 0.3em;
}
.thead-left {
	border-right: 1px solid #c7c7c7;
	padding: 0.3em 0.35em;
}
.thead-right {
	border-left: 1px solid #c7c7c7;
}
.table-label {
	clear: both;
	display: inline-block;
	width: 50%;
	border-right: 1px solid #c7c7c7;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
.table-border .product li{
	border-top: 1px solid #c8c7c7;
	padding-left: 7px;
	padding-right: 5px;
	font-size: 0.95em;
	margin-bottom: 0;
}
.table-border ul.product li:first-child {
	border-top: none !important;
}
.table-border .dropdown-check {
	width: 49%;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
.table-border > .img-cell, .table-row > .img-cell {
	border-right: 1px solid #c7c7c7;
	padding: 0.3em;
}
.table-border >.text-cell, .table-row > .text-cell {
	border-left: 1px solid #c7c7c7;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
.table-price {
	border-top: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
	padding: 0.3em;
}
.table-price.last {
	border-bottom: none;
}

/*NOTE -- HEADER & FOOTER MISC***/

/* This is for the premier supplier line (formerly low prices, best inventory...lbl) */
.lbl {
     text-align: center;
     color: #1675bb;
     font-weight: 700;
     padding: 12px 0;
     font-size: 1.45em;
}

@media (max-width: 767px) {
     .lbl {
          display: none !important;
     }
}

.top-menu-links {
     width: 100%;
     margin: 0;
     padding-top: 10px;
}
.menu-link {
     display: inline-block;
     padding: 0 0.25em;
     text-align: center;
     color: #01079b;
}
a.menu-link {
     text-decoration: none;
}

#footer {
	text-align: center;
}

.footerlinks {
     text-align: center;
     font-size: 13px;
     margin: 1em auto 0;
     padding-bottom: 0;
}

.footerlinks ul {
     margin: 0;
     padding: 0;
}

.footerlinks li {
     padding: 0 10px;
}

@media (min-width: 768px) and (max-width: 1024px) {
     .footerlinks {
          padding-bottom: 15px;
     }
}

@media screen and (max-width: 767px) {
     .footerlinks {
          padding-bottom: 10px;
     }
     .footerlinks li {
          padding: 5px;
     }
}

/* BBB Profile logo/link */
a.bbblink {
     position: initial !important;
}

a.bbblink img {
     position: initial !important;
}

.trust-signals a.bbblink {
     display: inline-block !important;
     margin: 0 !important;
}

/*NOTE -- A to Z LINKS***/

ul.azlinks {
	line-height: 1;
}
.azlinks {
     list-style-type: none;
     margin: 0 auto;
     margin-left: 0;
     padding-left: 0;
     font-weight: bold;
}
.azlinks li {
     display: inline-block;
     margin-left: 0.225em;
	 padding: 0;
}
.azlinks a {
     display: inline-block;
     text-decoration: none;
     padding-right: 4px;
}
#bottom-azlinks {
     display: inline-block;
     margin: 0.5em 0 0;
}
#bottom-azlinks .azlinks {
     display: inline-block;
}

@media (min-width: 768px) {
     .azlinks li:after {
          content: " I ";
          font-weight: normal;
     }
     .azlinks li:last-child:after {
          content: " ";
     }
     #bottom-azlinks .azlinks li:after {
          content: " ";
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .azlinks {
          letter-spacing: 2px;
          font-size: 15px;
     }
     #bottom-azlinks .azlinks {
          margin-top: 0.5em;
     }
}

@media screen and (max-width: 767px) {
     .azlinks {
          display: inline-block;
          margin: .5em 0 0 0;
     }
     .azlinks a {
          display: inline-block;
          margin: 5px 4px 0;
     }
     #bottom-azlinks {
          width: 90%;
          font-size: 0.825em;
          text-align: center;
          margin: 0 auto;
     }
     #bottom-azlinks .azlinks {
          font-size: 1.2em;
     }
}


*NOTE -- A to Z LINKS***/

ul.overstock-category-links {
	line-height: 1;
}
.overstock-category-links {
     list-style-type: none;
     margin: 0 auto;
     margin-left: 0;
     padding-left: 0;
     font-weight: bold;
}
.overstock-category-links li {
     display: inline-block;
     margin: .4em;
}
.overstock-category-links a {
     display: inline-block;
     text-decoration: none;
     padding-right: 4px;
}
#bottom-overstock-category-links {
     display: inline-block;
     margin: 0.5em 0 0;
}
#bottom-overstock-category-links .overstock-category-links {
     display: inline-block;
}

@media (min-width: 768px) {
     .overstock-category-links li:after {
          content: " I ";
          font-weight: normal;
     }
     .overstock-category-links li:last-child:after {
          content: " ";
     }
     #bottom-overstock-category-links .overstock-category-links li:after {
          content: " ";
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .overstock-category-links {
          letter-spacing: 2px;
          font-size: 15px;
     }
     #bottom-overstock-category-links .overstock-category-links {
          margin-top: 0.5em;
     }
}

@media screen and (max-width: 767px) {
     .overstock-category-links {
          display: inline-block;
          margin: .5em 0 0 0;
     }
     .overstock-category-links a {
          display: inline-block;
          margin: 5px 4px 0;
     }
     #bottom-overstock-category-links {
          width: 90%;
          font-size: 0.825em;
          text-align: center;
          margin: 0 auto;
     }
     #bottom-overstock-category-links .overstock-category-links {
          font-size: 1.2em;
     }
}


/*NOTE -- SEARCH BOX (TOP)*/
/*main search*/
.search {
     padding: 8px 0px 5px 10px;
     margin-right: 0;
     margin-left: 0;
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
     display: inline;
}
.searchbox {
	width: 200px;
	border: none;
	margin: 3px 3px 4px 3px;
	padding: 0px;
	float: left;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
}

.searchwrap {
	border: 1px solid #9a9a9a;
	border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
	background-color: #fff;
	height: 24px;
}
.searchbtn {
	background-color: #1675bb;
	color: #fff;
	border: none !important;
	margin: 0;
	padding: 0px 5px;
	font-weight: bold;
	height: 24px !important;
	-webkit-appearance: none !important;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
}
.searchbtn:hover {
	background-color: #d96905;
}
@media (max-width: 960px) {
	.searchbox {
		width: 120px;
	}
}
@media screen and (device-aspect-ratio: 3/4) {
	.search {
		padding: 7px 5px 0 0;
	}
     .searchbox {
		width: 150px;
	}
}
@media (min-width: 768px) and
	(max-width: 1023px) {
	.search {
		float: right;
          padding: 7px 0 0 0;
	}
     .searchbox {
          width: 110px;
     }
}
/*mobile search*/
@media (max-width: 767px) {
     .mobilesearch {
          padding: 10px 0px 7px 0px;
          margin-top: 6px;
          margin-right: 0;
          margin-left: 0;
          font-family: inherit;
          font-size: inherit;
          line-height: inherit;
          display: inline;
          clear: both;
          background-color: #eee;
     }
     .searchwrap {
          width: 90%;
          margin: 0 auto;
          padding: 0;
     }
     .mobilesearchbox {
          padding: 0px;
          margin: 3px;
          float: left;
          width: calc(100% - 65px);
          border: none;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
     }
     .mobilesearchbtn {
          float: right;
          background-color: #1675bb;
          color: #fff;
          border: none !important;
          margin: 0;
          padding: 3px 5px;
          font-weight: bold;
          height: 24px !important;
          -webkit-appearance: none !important;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
     }
     .mobilesearchbtn:hover {
          background-color: #d96905;
     }
}

/*NOTE -- SEARCH BOX (BOTTOM)*/
/*desktop view bottom search*/
.bottomsearch {
	display: flex;
     justify-content: center;
}
.bottom-searchbox {
	width: 280px;
	border: none;
	margin: 3px 3px 4px 3px;
	padding: 0px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
	float: left;
}
.bottom-searchwrap {
     border: 1px solid #9a9a9a;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     background-color: #fff;
     width: 40%;
     height: 24px;
}
.bottom-searchbtn {
     float: right;
     -webkit-appearance: none;
}
@media (max-width: 960px) {
	.bottom-searchbox {
		width: 200px;
	}
}
/*mobile view bottom search*/
@media (max-width: 767px) {
	.bottomsearch {
		width: 100%;
		margin: 0 auto;
	}
	.bottom-searchwrap {
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	.idsearchbox {
		float: left;
		border: none;
		padding: 0px;
		margin: 3px 3px -1px 3px;
          width: calc(100% - 60px);
	}
	.searchbtn {
		padding: 3px 5px;
		margin: 0;
		float: right;
	}
	.help {
		padding-left: 0;
	}
	.bottom-searchbox {
		width: 200px;
	}
}

@media (max-device-width: 360px) {
	/* .search {
		width: 100%;
		margin: 0;
		padding: 10px 0;
	}
	.idsearchbox {
		float:left;
		border: none;
		padding: 0px;
		margin: 3px;
	}
	.btn-search {
		float:left;
	}
	.navbar-btn {
		float: none;
		width: 75px;
	} */

     .visible-smallest-flex-col {
          flex-flow: column;
     }

     .attractor-buttons {
          justify-content: center;
          flex-flow: column !important;
     }

     .bbb-wrapper {
          width: 175px !important;
     }

     .navbar-brand-container {
          margin-bottom: 0px;
     }
}

a.searchbtn:link {
     color: #FFF;
}

/*NOTE -- INDEX PAGE & OTHER 3 COLUMN BORDERED LAYOUTS*/
.index-info {
	float: left;
	width: 32%;
	margin: 0 auto;
	padding: 10px 4px;
}
.index-info-border {
	border-right: 1px dotted #979797;
}
.index-info-border-both {
	border-right: 1px dotted #979797;
	border-left: 1px dotted #979797;
}
.index-info-border-sm {
	border-bottom: none;
}
.index-padding {
	padding: 0 7px;
}

@media (max-width: 767px) {
	.index-info {
		width: 100%;
		padding: 15px 0;
	}
	.index-padding {
		padding: 0;
	}
	.greybar {
		background-color: #fff;
	}
	.greysearch {
		background-color: #eee;
		width: 100%;
		margin: 5px auto;
		padding: 0;
	}
	.index-info-border {
		border-right: none;
	}
	.index-info-border-both {
		border-right: none;
		border-left: none;
}
	.index-info-border-sm {
		border-bottom: 1px dotted #979797;
		margin-bottom: 15px;
	}
}

/*NOTE -- Testimonials*/
.testimonials {
     width: 100%;
     margin: 0 auto;
     padding-top: 5px;
     padding-bottom: 5px;
     text-align: left;
     font-size: 14px;
}
.testimonialhead {
     padding: 4px;
     font-size: 22px;
     text-align: center;
     background-color: #eee;
	 margin: 0 auto;
}
.testi {
     width: 90%;
     margin: 10px auto;
}

/*NOTE -- FAQs*/
.faq {
     width: 90%;
     margin: 0 auto;
     padding: 5px;
     text-align: left;
}

.faq p,
.faq ul,
.faq ol {
     text-align: left;
     font-size: 14px;
}

.faqtitle {
     text-align: center;
     color: green;
     font-weight: bold;
     font-size: 1.5em;
}
.faq p:nth-child(2) {
	margin-top: 0.75em;
}
.q {
     text-align: left;
     font-size: 1.75em;
     font-weight: bold;
     color: green;
     text-shadow: 1px 1px 1px #b7b7b7;
}

.a {
     text-align: left;
     font-size: 1.75em;
     font-weight: bold;
     color: blue;
     text-shadow: 1px 1px 1px #b7b7b7;
}

#madeinusa-disclaimer {
	width: 90%;
}

/*NOTE -- MISC TOP OF PAGE*/
.mainbody {
     text-align: center;
     text-align: -moz-center;
     position: relative;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
}

.us {
     width: 90%;
     padding: 5px;
     margin: 0 auto;
     text-align: justify;
     font-size: 1em;
	line-height: 1.5;
	margin-bottom: 1em;
}

.headingbg {
     font-size: 20px;
     background-color: #eee;
     padding-top: 5px;
     padding-bottom: 5px;
     font-weight: normal;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
}
.headingbg.left {
	padding-left: 10px;
}

.index-heading {
	width: 90%;
	background-color: #eee;
	padding-top: 10px;
	padding-bottom: 5px;
	border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	-webkit-border-radius: 0.25em;
}
.heading-border {
	border-bottom: 1px dotted #c7c7c7;
	margin-bottom: 0.5em;
}

@media (max-width: 767px) {
	.headingbg.left {
		padding-left: 0;
		text-align: center;
	}
	.index-heading {
		width: 100%;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
}


/*NOTE --  UL, OL & LI's */
ul {
     list-style-type: disc;
}

.ulinline {
     list-style-type: none;
     text-align: center;
}

.ulinline li {
     display: inline-block;
}

.ulnone {
     list-style-type: none;
}

.dash, .arrow-list {
     list-style-type: none;
     margin-left: 0;
     padding-left: 25px;
}

.dash li:before {
     content: " -- ";
}

.arrow-list li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f061 ";
	padding-right: 0.5em;
	font-size: 0.8em;
}
ol.steps {
     list-style-type: none;
     margin: 0;
     padding: 0;
}
.steps li {
     counter-increment: step-counter;
     margin-bottom: 1em;
}
.steps li:before {
     content: "Step "counter(step-counter)". " ;
     font-weight: bold;
}


/*NOTE -- BORDERS */
.noborder {
     padding: 3px;
     margin: 0 auto;
     border: none;
     border-collapse: collapse;
}

.border {
     border-style: solid;
     border-width: 1px;
     border-collapse: collapse;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     padding: 3px;
     margin: 0 auto;
}

.bordergrey {
     border-color: #dddddd;
     border-style: solid;
     border-width: 1px;
     border-collapse: collapse;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
     padding: 3px 5px;
     margin: 0 auto;
}

.borderleft {
     border-left: 1px solid #eee;
}

.borderright {
     border-right: 1px solid #eee;
}

.bordertop {
     border-top: 1px solid #eee;
}

.borderbottom {
     border-bottom: 1px solid #eee;
}

/* ROUNDED CORNERS */
.r1 {
     -moz-border-radius: 0.25em;
     -webkit-border-radius: 0.25em;
     border-radius: 0.25em;
     border-width: 1px;
     border-style: solid;
}

@media (max-width: 767px) {
     .border-bottom {
          clear: both;
          border-bottom: 1px solid #eee;
          padding: 0.25em 0 0;
          margin: 0 0 0.25em;
     }
}

/*NOTE -- Used for Holiday Super Sale*/
.holidaysale {
     position: relative;
     display: block;
     float: left;
     padding-left: 10px;
}

.banneroverlay {
     position: absolute;
     top: 0px;
     left: 0px;
     height: 100%;
     width: 100%;
}


/*NOTE -- Used for ADA symbol on Index Pages*/

/*positions the linked image correctly for overlay*/
/*image must be 100px wide - if image is less than 100px, you must adjust padding accordingly*/
.ada {
     position: relative;
     display: block;
}


/*can only be used in conjunction with .ada*/
/*places small (20-30px square) image in top left corner of index image*/
.symbol {
     position: absolute;
     top: -2px;
     left: 4px;
     height: 100%;
     width: 25%;
     opacity: 0.95;
}

/*for kitchen faucet index - budget faucets*/
.kfsymbol {
     position: absolute;
     top: -2px;
     left: 3px;
     height: 100%;
     width: 25%;
     opacity: 0.95;
}

/*can only be used in conjunction with .ada - for 75px index images*/
/*places small (20-30px square) image in top right corner of index image*/
.smsymbol {
     position: absolute;
     top: -4px;
     left: 72px;
     height: 100%;
     width: 15%;
     opacity: 0.95;
}
/*for kitchen faucet index - H2O efficient*/
.kfsmsymbol {
     position: absolute;
     top: -3px;
     left: 115px;
     height: 100%;
     width: 15%;
     opacity: 0.95;
}

@media (max-width: 767px) {
     .smsymbol {
          top: -2px;
          /*left: 58px;*/
     }
     .kfsmsymbol {
          left: 95px;
     }
}


/* Used for small color box images on toilet seat pages */
.image {
     border-color: black;
     border-width: 1px;
     border-style: solid;
     border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
}


/*FUTURE -- used on showerhead-spray-patterns-review.html - may be able to find alternative*/
.gallery2 li {
     display: inline-block;
     list-style: none;
     vertical-align: top;
     margin: 0 10px 10px 0;
     text-align: center;
     padding: 0 2px 0 2px;
     line-height: 120%;
}

/*FUTURE -- may need to find new way to hide the pinterest image */
.hiddenpin {
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
     height: 0px;
     width: 0px;
}

/*NOTE -- For long words/URLs that cause page to display improperly on mobile*/
.long-words {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	/*word-break: break-all;*/
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*NOTE -- DISPLAY - Defines how and on which screens elements are displayed*/
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.modal-footer:before,
.modal-footer:after {
     content: " ";
     display: table;
}

.container:after,
.container-fluid:after,
.form-horizontal .form-group:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.modal-footer:after {
     clear: both;
}

@-ms-viewport {
     width: device-width;
}

.visible-xs,
.visible-xs-wide,
.visible-sm,
.visible-tab-sm,
.visible-tab,
.visible-md,
.visible-lg {
     display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-xs-wide-block,
.visible-xs-wide-inline,
.visible-xs-wide-inline-block,
.visible-xs-flex,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-tab-sm-block,
.visible-tab-sm-inline,
.visible-tab-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-sm-flex {
     display: none !important;
}

@media (max-width: 360px) {
     .visible-smallest-flex-col {
          flex-flow: column !important;
     }
}

@media (max-width: 767px) {
     .hidden-xs {
          display: none !important;
     }
     .visible-xs {
          display: block !important;
     }
     table.visible-xs {
          display: table;
     }
     tr.visible-xs {
          display: table-row !important;
     }
     th.visible-xs,
     td.visible-xs {
          display: table-cell !important;
     }
     td.visible-xs.tdblock {
          display: block !important;
     }
     .xs-none-m05rem { margin: 0; }
     .xs-none-mt05rem { margin-top: 0; }
     .xs-none-ml05rem { margin-left: 0; }
     .xs-none-mb05rem { margin-bottom: 0; }
     .xs-none-mr05rem { margin-right: 0; }
     .xs-none-mlr05rem { margin: 0; } 
     .xs-none-m15rem { margin: 0; }
     .xs-none-mt15rem { margin-top: 0; }
     .xs-none-ml15rem { margin-left: 0; }
     .xs-none-mb15rem { margin-bottom: 0; }
     .xs-none-mr15rem { margin-right: 0; }
     .xs-none-m2rem { margin: 0; }
     .xs-none-mt2rem { margin-top: 0; }
     .xs-none-ml2rem { margin-left: 0; }
     .xs-none-mb2rem { margin-bottom: 0; }
     .xs-none-mr2rem { margin-right: 0; }
     .xs-none-m25rem { margin: 0; }
     .xs-none-mt25rem { margin-top: 0; }
     .xs-none-ml25rem { margin-left: 0; }
     .xs-none-mb25rem { margin-bottom: 0; }
}

@media (max-width: 767px) {
     .visible-xs-block {
          display: block !important;
     }
}

@media (max-width: 767px) {
     .visible-xs-inline {
          display: inline !important;
     }
}

@media (max-width: 767px) {
     .visible-xs-inline-block {
          display: inline-block !important;
     }
}

@media (max-width: 767px) {
     .visible-xs-rtl {
          direction: rtl;
     }
     .visible-xs-flex {
          display: flex !important;
     }
     .visible-xs-flex-col {
          flex-flow: column;
     }
     .visible-xs-flex-row {
          flex-flow: row;
     }
     .visible-xs-flex-center {
          justify-content: center;
     }
     .visible-xs-align-items-center {
          align-items: center;
     }
}

@media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
     .hidden-xs-wide {
          display: none !important;
     }
     .visible-xs-wide {
          display: block !important;
     }
     .visible-xs-wide-block {
          display: block !important;
     }
     .visible-xs-wide-inline {
          display: inline !important;
     }
     .visible-xs-wide-inline-block {
          display: inline-block !important;
     }
     .col-xs-wide-4 {
          width: 33.33333333%;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-sm, .visible-tab {
          display: block !important;
     }
     table.visible-sm {
          display: table;
     }
     tr.visible-sm {
          display: table-row !important;
     }
     th.visible-sm,
     td.visible-sm {
          display: table-cell !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-sm-block {
          display: block !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-sm-inline {
          display: inline !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-sm-inline-block {
          display: inline-block !important;
     }
}

@media (min-width: 768px) and (max-width: 960px) {
     .visible-tab-sm {
          display: block !important;
     }
     table.visible-tab-sm {
          display: table;
     }
     tr.visible-tab-sm {
          display: table-row !important;
     }
     th.visible-tab-sm,
     td.visible-tab-sm {
          display: table-cell !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-tab-sm-block {
          display: block !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-tab-sm-inline {
          display: inline !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-tab-sm-inline-block {
          display: inline-block !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .visible-sm-flex {
          display: flex !important;
     }
}

@media (min-width: 1025px) and (max-width: 1199px) {
     .visible-md {
          display: block !important;
     }
     table.visible-md {
          display: table;
     }
     tr.visible-md {
          display: table-row !important;
     }
     th.visible-md,
     td.visible-md {
          display: table-cell !important;
     }
}

@media (min-width: 1025px) and (max-width: 1199px) {
     .visible-md-block {
          display: block !important;
     }
}

@media (min-width: 1025px) and (max-width: 1199px) {
     .visible-md-inline {
          display: inline !important;
     }
}

@media (min-width: 1025px) and (max-width: 1199px) {
     .visible-md-inline-block {
          display: inline-block !important;
     }
}

@media (min-width: 1200px) {
     .visible-lg {
          display: block !important;
     }
     table.visible-lg {
          display: table;
     }
     tr.visible-lg {
          display: table-row !important;
     }
     th.visible-lg,
     td.visible-lg {
          display: table-cell !important;
     }
}

@media (min-width: 1200px) {
     .visible-lg-block {
          display: block !important;
     }
}

@media (min-width: 1200px) {
     .visible-lg-inline {
          display: inline !important;
     }
}

@media (min-width: 1200px) {
     .visible-lg-inline-block {
          display: inline-block !important;
     }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .hidden-sm {
          display: none !important;
     }
}

@media (min-width: 768px) and (max-width: 960px) {
     .hidden-tab-sm {
          display: none !important;
     }
}

@media (min-width: 1025px) and (max-width: 1199px) {
     .hidden-md {
          display: none !important;
     }
}

@media (min-width: 1200px) {
     .hidden-lg {
          display: none !important;
     }
}

.visible-print {
     display: none !important;
}

@media print {
     .visible-print {
          display: block !important;
     }
     table.visible-print {
          display: table;
     }
     tr.visible-print {
          display: table-row !important;
     }
     th.visible-print,
     td.visible-print {
          display: table-cell !important;
     }
}

.visible-print-block {
     display: none !important;
}

@media print {
     .visible-print-block {
          display: block !important;
     }
}

.visible-print-inline {
     display: none !important;
}

@media print {
     .visible-print-inline {
          display: inline !important;
     }
}

.visible-print-inline-block {
     display: none !important;
}

@media print {
     .visible-print-inline-block {
          display: inline-block !important;
     }
}

@media print {
     .hidden-print {
          display: none !important;
     }
     .lbl,
     .azlinks,
     .top-link {
          display: none !important;
     }
}

/*This was to better display some information for structured data without it being seen on page - to be used VERY VERY VERY sparingly*/
.hidden {
	display: none !important;
}

/* Emergency alert styles - JL 3/18/2020 */
div.emergency {
     font-weight: bold;
     margin: 10px auto;
     padding: 1em;
}

.emergency-delay {
     color: #856404;
     background-color: #fff3cd;
}

.emergency-closure {
     color: #000;
     background-color: #FFD48F;
}

/* Back to top button styling  */

.btn-top-parent {
     display: flex;
     flex-flow: column;
     position: fixed;
     bottom: 20px;
     background-color: rgba(255,255,255,0.7);
     padding: 0 .5em .5em .5em;
     border-style: none;
     border-radius: 1em;
     display: none;

}

.btn-top {
     width: 2.0rem;
     margin: 0 auto;
     line-height: 2.0rem;
     border-radius: 50%;
     border-color: #1675bb;
     border-style: solid;
     color: #1675bb;
}

.btn-scroll-top-text {
     font-size: 15px;
     line-height: 2.0rem;
     color: black;
     margin: 0 auto;
}

/* Back to top button styling for Desktop */
@media (min-width: 1200px) {

     .btn-top-parent {
          right: calc((100% - 1200px)/2);
     }
     .btn-top:hover {
          border-color: #d96905;
          color: #d96905;
     }
}
/* Back to top button styling for Tablets & Mobile */
@media (max-width: 1199px) {

     .btn-top-parent {
          right: 12px;
          background-color: rgba(255,255,255,0.7)
     }
     .btn-top:focus {
          border-color: #d96905;
          color: #d96905;
     }
}

/* Retired message stlying */
.retired-message {
     margin: 2rem 5rem 2rem 5rem;
     border-style: solid;
     border-radius: 25px;
     border-color: lightcoral;
     background-color: lightcoral;
     padding-left: 10px;
     padding-right: 10px;
}
/* Back to top button styling for Tablets & Mobile */
@media (max-width: 1199px) {

     .retired-message {
          margin: 2rem 0 2rem 0;
     }
}

/* Banner advertisement styling */
.banner-advertisement {
     padding: 1rem;
     background-color: lightblue;
     font-weight: bold;
 }
 
 p.banner-text {
     margin: 0 2rem 0 2rem;
 }

 /* Better business bureau badge styling */
 a.bbblink{
     min-width: 130px;
     max-width: 136px;
     display:block;
     position:relative;
     text-align:center;color:#005A78;
     text-decoration:none;
     overflow:hidden;
     margin: 12px 10px 0px 0px;
     padding:0;
     float: right;
}
 a.bbblink img {
     border:0;
     position:absolute;
     top:0;
     left:0;
     margin-left:0;
     max-width:200% !important;
}

.bbb-rating {
     margin-top: -14px;
     width: 145px;
     color: #005A78;
     position: absolute;
     background-color: white;
}

.bbb-wrapper {
     width: 160px;
     height: 80px;
}

/* Google Play Android app badge which is in the footer of every page */

.google-play-badge {
     min-width: 155px;
     width: 195px;
}

.attractors-wrapper {
     margin-top: 1em;
     display: flex;
     justify-content: center;
     align-items: center;
}

.index-info-greybar {
	background-color: #eee;
}

.attractor-buttons {
     flex-flow: row;
}

lite-youtube {
     margin: 0 auto;
     background-color: #000;
     position: relative;
     display: block;
     contain: content;
     background-position: center center;
     background-size: cover;
     cursor: pointer;
     max-width: 720px;
 }
 
 /* gradient */
 lite-youtube::before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     background-image: url("/images/lite-yt-gradient.png");
     background-position: top;
     background-repeat: repeat-x;
     height: 60px;
     padding-bottom: 50px;
     width: 100%;
     transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
 
 /* responsive iframe with a 16:9 aspect ratio
     thanks https://css-tricks.com/responsive-iframes/
 */
 lite-youtube::after {
     content: "";
     display: block;
     padding-bottom: calc(100% / (16 / 9));
 }
 lite-youtube > iframe {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     border: 0;
 }

 .desktop-shipnote {
     position: relative;
     bottom: 0;
 }
 
 /* play button */
 lite-youtube > .lty-playbtn {
     display: block;
     width: 75px;
     height: 75px;
     position: absolute;
     cursor: pointer;
     transform: translate3d(-51%, -51%, 0);
     top: 51%;
     left: 51%;
     z-index: 1;
     background-color: transparent;
     /* YT's actual play button svg */
     filter: opacity(80%);
     background-image: url('/images/youtube-icon-lg.png');
     transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
     border: none;
 }
 
 lite-youtube:hover > .lty-playbtn,
 lite-youtube .lty-playbtn:focus {
     filter: none;
 }
 
 /* Post-click styles */
 lite-youtube.lyt-activated {
     cursor: unset;
 }
 lite-youtube.lyt-activated::before,
 lite-youtube.lyt-activated > .lty-playbtn {
     opacity: 0;
     pointer-events: none;
 }
 
 .lyt-visually-hidden {
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     height: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
     width: 1px;
   }


.top-links-click-banner:hover, .top-links-click-banner:focus {
transition: 0.2s;
background-color: #1c76d6;
color: black;
}


.top-links-click-banner {
     background-color: #268fff;
     border: none;
     color: black;
     padding: 5px 0px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     border-radius: 25px;
     margin-top: 8px;
     margin-bottom: 8px;
     width: 40%;
     box-shadow: 0px 2px 5px #888888;
}


.top-links-click-banner:visited {
     color: black;
}

@media (max-width: 767px) {
     .top-links-click-banner {
          width: 90dvw;
     }
}
 
[popover] {
     /* height: 99%; */
     background-color: transparent;
     border-style: none;
}

[popover]::backdrop {
     background: rgba(108, 101, 101, 0.573);
     backdrop-filter: blur(4px);
}

.popover-icon-close:before {
     position: absolute;
     font-size: 12pt !important;
     background-color: transparent;
     border-color: rgb(237, 237, 237);
     border-style: solid;
     border-radius: 100%;
     padding: 10px 15px 10px 15px;
     top: 15px;
     right: 15px;
     bottom: auto;
     content: '\2715';
}

.popover-overlay {
     margin: 0;
     width: 100%;
     height: 100%;
     padding: 0;
     background-color: transparent;
}

.popover-main {
     background-color: white;
     position: absolute;
     top: 47%;
     left: 50%;
     transform: translate(-50%, -47%);
     text-align: center;
     width: 600px;
     max-height: 85vh;
}

.popover-text {
     text-wrap: wrap;
     font-size: 14pt;
     background-color: white;
     padding: .4em;
     text-align: center;
     position: absolute;
     bottom: auto;
     left: 0;
     right: 0;

}

.popover-image {
     max-width: 600px;
     max-height: 77vh;
}

.text-wrap {
     text-wrap: wrap;
}

@media (width < 728px) {
     .popover-main {
          width: 100vw;
     }
               /* width: 100% */
     .popover-image {
          max-width: 100%;
     }
}

.mobile-banner-header {
     font-size: 20px;
     font-weight: 800;
     text-align: center;
     padding-top: 4px;
     padding-bottom: 4px;
     background-color: #f2f2f2;
     border-bottom-style: solid;
     border-bottom-width: thin;
     border-bottom-color: #cfcfcf;
}

@media (width < 500px) and (width > 351px) {
     .mobile-banner-header {
          font-size: 16px;
     }
}
@media (width < 395px) {
     .mobile-banner-header {
          font-size: 12px;
     }
}


.desktop-banner-header {
     display: flex;
     justify-content: center;
     font-size: 18px;
     text-align: center;
     padding-top: 8px;
     margin: 0 auto;
}
/* Modern table with 2 columns */

.grid-2col-auto {
     display: grid;
     border-style: solid;
     border-width: 1px;
     border-color: #c8c7c7;
     grid-auto-rows: auto;
     grid-template-columns: 1fr 1fr;
}

.ti-left {
     text-align: left;
     padding: 0.5em;
}

.ti-center {
     text-align: center;
     padding: 0.5em;
}

.ti-right {
     text-align: right;
     padding: 0.5em;
}

.ti-left, .ti-right, .ti-center {
     line-height: 1.35;
     font-size: 14px;
     border-style: solid;
     border-width: 1px;
     border-bottom-style: none;
     border-color: #c8c7c7;
     
}

.th-new {
     padding: .45em;
     text-align: center;
     font-size: 0.85em;
     font-weight: bold;
}


.cart-container {
     width: 55%;
}

.desktop-ship-notes {
     font-size: 1.5rem;
}

@media (width < 990px) {
     .desktop-ship-notes {
          font-size: 1.25rem;
          padding-top: 10px;
     }
     .cart-container {
          width: 50%;
     }
}

@media (width < 850px) {
     .desktop-ship-notes {
          padding-top: 12px;
          font-size: 1rem;
     }
     .cart-container {
          width: 45%;
     }
}

.product-card {
     border-radius: 15px;
     padding: .3em;
     margin: .3em;
     border-width: 1px;
     border-style: solid;
     border-color: #b9b8b8e6;
     box-shadow: 0px 1px 4px 3px rgba(209,202,202,0.82);
     -webkit-box-shadow: 0px 1px 4px 3px rgba(209,202,202,0.82);
     -moz-box-shadow: 0px 1px 4px 3px rgba(209,202,202,0.82);
}

.product-card-deux {
     border-style: solid;
     border-width: 1px;
     border-color: rgb(179, 179, 179);

}

.product-card-grouper {
     border-style: solid;
     border-width: 1px;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.product-card-image > img {     
     box-sizing: border-box;
}

.product-card-tres {
     display: flex;
     font-size: 14px;
     border-radius: 15px;
     padding: .2rem;
     margin: .2rem;
     border-width: 1px;
     border-style: solid;
     border-color: #b9b8b8e6;
     box-shadow: 0px 1px 3px 2px rgba(209,202,202,0.82);
     -webkit-box-shadow: 0px 1px 3px 2px rgba(209,202,202,0.82);
     -moz-box-shadow: 0px 1px 3px 2px rgba(209,202,202,0.82);
}

.product-card-hr {
     background-color: #bbbbbb;
    border-width: 0;
    color: #444;
    height: 2px;
    text-align: center;
    margin: .5rem;
}

.product-card-u {
     background-color: #bbbbbb;
     border-width: 0;
     color: #444;
     height: 2px;
     text-align: center;
     margin: 0;
}

.round-top {
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
}

.email-marketing-sign-up {
     background-color: #ff540f;
     padding: 1em;
     margin-top: 1em;
}

input[id="couponcode"] {
     border-color: #aea7a7;
     border-left-style: none;
     border-right-style: none;
     border-top-style: none;
     border-width: 1px;
     height: 28px;
}


.discount-button {
     padding: .35rem;
     margin: .35rem;
     border-width: 1px;
     border-color: grey;
     background-color: #ececec;
     border-radius: 5px;
     width: 50px;
}

.discount-button:hover {
     background-color: #cac9c9;
}

.discount-dropdown {
     border-style: solid;
     border-width: 1px;
     border-color: #cac9c9;
     text-align: center;
     float: none !important;
     position: relative !important;
}

.discount-dropdown form {
     margin-left: 0.75rem;
     margin-right: 4px;
}