:root {
  --header-background-1: #25201c;
  --header-background-2: /*#232f3e; #404040;*/ #000;
  --body-background: #bfbdbf; /* #fff;*/
  --menu-bar: white;
  --nav-toggle-border: white;
  --nav-text: white;
  --logo-color: #f0f0f0;
  --tbbg-color: #ff8000;
  --modal-box-background: white;
  --modal-box-border: #aaa;
  --best-product-header: black;
  --best-products-title: #404040; /*#333333;*/
  --best-product-background: #404040; /* #505050;*/ /*#333333;*/
  --menu-bottom-border: #e5e5e5;
  --menu-hover: #1a73e8;
  --active-menu-item: #1a73e8; /*blue;*/
  --submenu-hover: #1a73e8;
  --colors-block-background: #f8f8f8;
  --colors-block-border: #c0c0c0;
  --colors-text: #666;
  --colors-separator: #e5e5e5;
  --info-block-border: #c0c0c0;
  --tile-color: #90244D;
  --tile-active:#1f707a; /*#248390;*/  /* <---------- */
  --tile-text: white;
  --trending-active: #154a51; /* #1a5d65;*/
  --trending-text: white;
  --resources-background: #248390;
  --resources-text: white;
  --resources-border: #aaa;
  --resource-background: #fff;
  --resource-border: #e5e5e5;
  --h2-text: #cc0033;
  --h2-border: #cc0033;
  --product-links-text: black;
  --product-links-header: #2f2f2f;
  --product-links-header-text: white;
  --product-links-separator: white;
  --product-links-even-row: #e0e0e0;
  --product-links-odd-row: white;
  --product-available: green;
  --product-not-available: red;
  --footer-background: #d9d9d9; /*#f8f8f8;*/
  --footer-color: black;
  --footer-border: #9a9a9a; /* #a0a0a0;*/ /* #c0c0c0;*/
}

body {
	padding: 0; margin: 0;
	background-color: var(--body-background);
  font: normal normal normal 13px 'Montserrat', sans-serif;
	font-weight: 400;
}

.hide { display: none; }

#logo {
	float: left;
	padding: 0;
	margin: 0 75px 0 30px;
}

#logo img {
	float: left;
	width: 40px; height: 40px;
	padding: 0;
	margin: 10px 0 0 0;
}

#the {
	display: inline-block;
	padding: 0; margin: 0;
	font-size: 13px;
	color: var(--logo-color);
}

#bbg {
	display: inline-block;
	padding: 0;
	margin: 15px 0 0 0;
	font-family: 'PT Sans'; /*add alternative fonts */
	font-size: 16px;
	font-weight: bold;
  color: var(--logo-color);
}

#slogan {
  display: block;
	padding: 0;
  margin: -2px 0 0 32px;
	font-weight: normal;
	font-size: 10px;
  color: var(--tbbg-color);
}

h1 {
	padding: 0;
	margin: 10px 0 0 0;
	font-family: 'PT Sans', serif;
	font-size: 20px;
	color: black;
	text-align: center;
}

.bbw p {
	padding: 0; margin: 0;
	font-size: 12px;
	text-align: center;
}

.featured-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* space-evenly */
	padding: 0; margin: 0;
}

.featured-wrap-col {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
	padding: 0 0 20px 0;
	margin: 0;
}

.best-products-wrapper {
  width: 290px;
  padding: 10px 20px 10px 20px;
  margin: 0;
	background-color: var(--best-products-title);
  border: 1px solid var(--best-products-title);
  border-radius: 10px;
}

.mx  { margin: 20px 0 0 0; }
.ml  { margin: 20px 0 0 20px; }
.mr  { margin: 20px 20px 0 0; }
.mlr { margin: 20px 20px 0 20px; }
.mtr { margin: 0 20px 0 0; }
.mtl { margin: 0 0 0 20px; }

.star { color: var(--tbbg-color); }

.best-products-title {
	padding: 0; margin: 0;
	color: var(--tbbg-color);
	font: 14px Montserrat;
	font-weight: bold;
}

.best-products-category {
  padding: 3px 0 0 0;
	margin: 0;
	line-height: 120%;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.8);
}

.best-products-table {
	width: 100%;
	padding: 5px 0 0 0;
  margin: 10px 0 0 0;
	font-size: 18px;
	color: white;
  cursor: pointer;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.best-products-table td:nth-child(2) {
	width: 20px;
	padding: 0; margin: 0;
	font-size: 12px;
	text-align: right;
	vertical-align: middle;
}

.product { padding: 0; margin: 0; }

.f14 { font-size: 14px; }
.f16 { font-size: 16px; }

.price-range { font-size: 10px; color: var(--tbbg-color); }

.featured-product-name {
    display: block;
    padding: 0;
    margin: 10px 0 15px 0;
    font-family: 'PT Sans';
    font-size: 18px;
}

.modal {
  display: none;
  z-index: 1;
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.6); /*0.4*/
}

.modal-box {
	padding: 0 30px 20px 30px;
  margin: 0px auto 0 auto;
  max-width: 512px; max-height: 100vh; /*calc(100vh - 80px);*/
	background-color: var(--modal-box-background);
  border: 1px solid var(--modal-box-border);
  overflow-y: auto;
}

.modal-box-header {
	position: relative;
	padding: 0; margin: 0;
}

.modal-box-x {
	position: absolute;
	top: 5px; right: 10px;
	padding: 0; margin: 0;
	font-size: 30px;
	font-weight: normal;
	cursor: pointer;
}

.modal-box-best-product {
	display: block;
	padding: 20px 0 0 0;
	margin: 0;
	text-align: center;
	font-family: 'PT Sans';
	font-weight: bold;
	font-size: 18px;
	color: var(--best-product-header);
}

.modal-box-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 0;
	margin: 20px 0 0 0;
	text-align: center;
	font-size: 10px;
	font-weight: bold; 
	border-bottom: 2px solid var(--menu-bottom-border);
}

.modal-box-menu div {
	padding: 0 10px 5px 10px;
	margin: 0 0 -2px 0;
}

.active { color: var(--active-menu-item); border-bottom: 2px solid var(--active-menu-item); }

.modal-box-menu div:hover:not(.active) {
	cursor: pointer;
	color: var(--menu-hover);
	border-bottom: 2px solid var(--menu-hover);
}

.submenu {
	display: flex;
	justify-content: center;
	/*width: 100%; height: 25px;*/
	padding: 0;
	margin: 0;
	background-color: white;
}

.submenu-border {
  padding: 0 0 5px 0;
  margin: 0 0 10px 0;
  border-bottom: 2px solid var(--menu-bottom-border);
  /*box-shadow: 0 8px 4px -10px black;*/
	/*box-shadow: 0 3px 6px rgba(50,50,50,50.3); 6px rgba(50,50,50,50.3);*/
}

.submenu-noborder {
  padding: 0 0 5px 0;
  margin: 0 0 10px 0;
}

.submenu > div {
	padding: 5px 10px 0 10px;
	margin: 0;
	font-size: 12px;
}

.sm-active { color:#1a73e8; font-weight: bold; }
.sm-active::before { content: '[ '; }
.sm-active::after { content: ' ]'; }

[data-subpanel]:hover:not(.sm-active) {
  font-weight: bold;
  color: #1a73e8;
	cursor: pointer;
}

form { font-size: 12px; }

select { font-size: 12px; border: 1px solid var(--active-menu-item); }

.product-image {
  width: 300px; /*max-height: 100vh;*/
	padding: 0;
	margin: 0 auto;
}

.product-image img {
  /*width: 300px; height: 400px;*/
  /*width: 100%;
  object-fit: cover;*/
	/*-webkit-object-fit: cover;
	object-fit: cover;
	-webkit-object-fit: cover;
	-moz-object-fit: cover;
	-o-object-fit: cover;
	-ms-object-fit: cover;*/
	display: inline-block;
	padding: 0; margin: 0;
	max-height: 370px;
	max-width: 100%;
	vertical-align: middle;
  
}

.accessory {
  width: 300px; max-height: 370px;
	margin: 0 auto;
}

.product-image-footer {
	padding: 10px 0 0 0;
	margin: 0;
	text-align: center;
}

.check-prices {
	display: inline-block;
	font-weight: bold;
	font-size: 10px;
	padding: 5px 5px 5px 5px;
	margin: 0 15px 0 15px;
	border: 1px solid var(--active-menu-item);
	border-radius: 10px 10px 10px 10px;
}

.check-prices:hover {
  color: var(--active-menu-item);
	/*color: var(--tbbg-color);*/
	cursor: pointer;
}

.c-div { width: 300px; margin: 0 auto; }

.availability {
  cursor: pointer;
  /*text-decoration: underline;*/
}

.info-container {
  padding: 5px 20px 10px 20px;
  margin: 5px 0 0 0;
  font-size: 13px;
  line-height: 140%;
  /*border-top: 1px solid var(--menu-bottom-border);
  border-radius: 10px;*/
}

.info-container > p { padding: 5px 0 5px 0; margin: 0; line-height: 140%; }
.info-container img { max-width: 100%; }
.info-container a:link { color: var(--active-menu-item); }
.info-container a:visited { color: var(--colors-text); }

.features-list {
	padding: 0; margin: 0;
	list-style-type: disc;
}

.features-list li {
	padding: 2px 0 2px 5px;
  margin: 0 0 0 12px;
}

table.ktan-sizing { width: 100%; border-collapse: collapse; text-align: center; }
table.ktan-sizing tr.tr-d td, table.ktan-sizing tr.tr-s td { border-right: 2px solid #3390bb; }
table.ktan-sizing tr.tr-h { color: #3390bb; background-color: white; font-weight: bold; }
table.ktan-sizing tr.tr-d { color: white; background-color: #4ca7cc; }
table.ktan-sizing tr.tr-d td:nth-child(1) { background-color: #3390bb; }
table.ktan-sizing tr.tr-s { background-color: #f1fcfc; font-weight: bold; }

ul.specs { padding: 0; margin: 0 5px 0 15px; list-style-type: none; }
ul.specs li { padding: 5px 0 5px 0; /*border-bottom: 1px solid #e5e5e5;*/ }
/*ul.specs li:first-child { border-top: 1px solid #e5e5e5; } */

ul.adapters-list,
ul.accessories-list {
  padding: 0;
  margin: 0 0 0 30px;
  list-style-type: disc;
}

ul.adapters-list li,
ul.accessories-list li {
  padding: 2px 0 2px 10px;
  margin: 0;
}

table.sizes { margin: 10px auto 5px auto; border-collapse: collapse; max-width: 500px; }
table.sizes tr { border-bottom: 1px solid #ab1142; }
table.sizes tr:first-child { font-weight: bold; }
table.sizes td { text-align: center; padding: 2px 2px 2px 2px; vertical-align: middle;}
table.sizes td:first-child {
	color: #333;
	font-weight: bold;
	border-right: none;
	padding: 2px 0 2px 0;
}

p.doclink { text-align: center; line-height: 200%; }

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-top: 15px;
}

.youtube iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(black, white);
  border: none;
  /*border-bottom: 1px solid #e5e5e5;*/
}

.site-video-policy { font-size: 11px; text-align: center; text-decoration: none; }

table.v-list {
  padding: 0;
  margin: 10px 0 0 0;
  border-collapse: collapse;
}

table.v-list td:first-child {
	display: inline-block;
	padding: 0;
	margin: 2px 15px 0 0;
	width: 40px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #666;
	border-radius: 3px;
	cursor: pointer;
}

table.v-list td:hover:first-child { color: var(--tbbg-color); border: 1px solid var(--tbbg-color); }

.video_title {
  display: inline-block;
  padding: 0 0 0 10px;
  text-align: left;
}

.video_byline {
  display: block;
  padding: 0 0 10px 10px;
  font-size: 70%;
  text-align: left;
}

.video_byline a { text-decoration: none; color: #666; }
.video_byline a:hover { text-decoration: underline; }

.product-video-footer {
	padding: 10px 0 0 0;
	margin: 0;
	text-align: center;
}

.show-video-list {
  display: inline-block;
  padding: 5px 5px 5px 5px;
  margin: 0 15px 0 15px;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 12px;
	cursor: pointer;
}

.show-video-list::before {
	content: 'Back To Video List';
}

.affiliate-disclosure {
	padding: 0;
  margin: 0 0 10px 0;
  font-size: 11px;
	text-align: center;
}

table.product-links {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 10px 0 10px 0;  /* margin on bottom for scrollbar */
  border-collapse: collapse;
  color: var(--product-links-text);
}

table.product-links tr th:first-child {
  background-color: var(--product-links-header);
  color: var(--product-links-header-text);
}

table.product-links tr th:not(:first-child) {
  padding: 5px 2px 5px 2px;
  margin: 0;
  background-color: var(--product-links-header);
  font-size: 10px;
  font-weight: bold;
  color: var(--product-links-header-text);
}
 
table.product-links tr td:first-child, table.product-links tr th:first-child {
  position: sticky;
  top: 0; left: 0;
  padding: 5px 4px 5px 5px; 
  margin: 0; 
  white-space: nowrap;
  text-align: left;
  font-size: 10px;
  font-weight: bold;
  border-right: 1px solid var(--product-links-separator);
}

table.product-links tr td:nth-child(1) {
  background-color: inherit;   /* required for scrolling to work properly */
}

table.product-links tr td:not(:first-child) {
  padding: 5px 0 5px 0;
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
}

table.product-links tr:nth-of-type(even) {
  background-color: var(--product-links-even-row);
}

table.product-links tr:nth-of-type(odd) {
  background-color: var(--product-links-odd-row);
}

.y {
  text-decoration: none;
  color: var(--product-available);
}

.yy {
  text-decoration: none;
  font-weight: bold;
  color: var(--product-available);
}

.y:hover {
	text-decoration: underline;
	cursor: pointer;
}

.x { color: var(--product-not-available); }

.exclusive { font-size: 10px; margin-top: -5px; }
.exclusive-store {
  display: inline-block; 
	padding: 1px 4px 2px 4px;
  margin-left: 5px; 
	background-color: var(--product-links-header); 
	border: 1px solid black; 
	border-radius: 8px; 
	color: white;
}

.tile-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
	padding: 0;
	margin: 0 auto 20px auto;
	max-width: 800px; /*612px;*/
}

.tile {
	width: 120px; height: 110px;
	padding: 20px 20px 20px 20px;
	margin: 0;
	background-color: var(--tile-color);
	text-align: center;
	color: var(--tile-text);
	border: 1px solid var(--tile-color);
	border-radius: 20px;
}

.tile:hover {
  background-color: var(--tile-active);
  color: var(--tile-text);
  cursor: pointer;
  border: 1px solid var(--tile-active);
}

.tile-header {
	display: block;
	font-size: 18px;
	font-weight: bold;
}

.tile-learn-more {
	display: inline-block;
	padding: 3px;
  margin: 0;
  font-size: 14px;
  border: 1px solid white;
  border-radius: 5px;
}

.tile-state::before {
	content: '\276D';
	display: block;
	transform: rotate(90deg);
	font-size: 20px;
}

.tile-active::before { content: 'X'; }

.trending-links {
	display: none;
	width: 250px;
	padding: 10px 30px 10px 30px;
	margin: 20px auto;
	color: var(--trending-text);
	background-color: var(--trending-active);
	border-radius: 20px;
}

.trending-header {
	display: block;
	padding: 5px 0 0 0;
	margin: 0;
	text-align: center;
	font-family: 'PT Sans';
	font-weight: bold;
	font-size: 18px;
	color: var(--trending-text);
}

.trending-on-amazon {
	/*width: 100%;*/
	padding: 0 0 10px 0;
	margin: 0;
	list-style-type: none;
	font-size: 14px;
}

.trending-on-amazon li {
	padding: 5px 0 5px 0;
	margin: 0;
	text-align: center;
	color: var(--trending-text);
	font-weight: normal;
	border-bottom: 1px solid #aaa;
}

.trending-on-amazon li:hover { font-weight: bold; cursor: pointer; }

.trending-on-amazon a:link { color: var(--trending-text); text-decoration: none; }
.trending-on-amazon a:visited { color: var(--trending-text); }
.trending-on-amazon a:hover { color: var(--trending-text); }
.trending-on-amazon a:active { color: var(--trending-text); }

.rarrow { display: block; float: right; }
.darrow { display: block; float: right; transform: rotate(90deg); }

.resources-guide {
	display: none;
	width: 250px;
	padding: 0;
	margin: 0 auto;
	background-color: var(--resources-background);
	border-radius: 20px;
}

.resources-list {
	width: 250px;
	padding: 10px 0 20px 0;
	margin: 0 auto 20px auto;
	list-style-type: none;
	font-size: 14px;
}

.resources-list li {
	padding: 5px 5px 5px 10px;
	margin: 0 20px 0 20px;
	text-align: left;
	color: var(--resources-text);
	border-bottom: 1px solid var(--resources-border);
}

.resources-list li:hover {
	cursor: pointer;
	font-weight: bold;
}

.resource {
	display: none;
	position: relative;
  max-width: 612px;
  padding: 0 35px 5px 35px;
  margin: 30px auto;
  background-color: var(--resource-background);
  border: 2px solid var(--resource-border);
  line-height: 140%;
}

.resource p a:link {color: #666; }

.resource-x {
	position: absolute;
	top: 5px; right: 20px;
	padding: 0; margin: 0;
	font-size: 30px;
	font-weight: normal;
  cursor: pointer;
}

h2 {
  padding: 5px 0 2px 0px;
  margin: 15px 0 5px 0;
  font-family: 'PT Sans';
  font-size: 150%;
  font-weight: bold;
  color: var(--h2-text);
  border-bottom: 1px solid var(--h2-border);
}

.wrap-sizing { margin: auto; }
.wrap-sizing tr { text-align: center; }

.ticks { font-size: 16px; }

.info {
	width: 270px; height: 130px;
	padding: 15px; 
  margin: 20px 0 0 0;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(50,50,50,50.3);
  line-height: 140%;
}

.bc1 { background-color: var(--tile-color); color: white; }
.bc2 { background-color: #007fff; color: white; }
.bc3 { background-color: var(--tile-active); color: white; }

.h145 { height: 145px; }

.info-link {
  text-decoration: underline;
  cursor: pointer;
}

.info-title {
	padding: 0; margin: 0;
	/*font-family: 'PT Sans';*/
	font-size: 14px; /*16px;*/
  font-weight: bold;
}

.types { display: inline-block; padding: 3px; border: 1px solid white; color: white; font-size: 12px; }
.types:hover { color: #ff8000; cursor: pointer; border: 1px solid #ff8000; }

.tile-wrapper a:link { color:white;}
.tile-wrapper a:visited { color: white}
.tile-wrapper a:hover { font-weight: bold; color: #ff8000; }
.tile-wrapper a:active { color: white;}

/* start of page footer */

footer {
  padding: 15px 0 15px 0;
  margin: 0;
  background-color: var(--footer-background);
  text-align: center;
  color: var(--footer-color);
  border-top: 1px solid var(--footer-border);
  box-shadow: 0 50vh 0 50vh var(--footer-background);
}

ul.site-info {
  list-style: none;
  padding: 0; margin: 0;
  font-size: 11px;
}

ul.site-info li {
  padding: 0 15px 0 0;
  margin: 0;
  display: inline-block;
}

ul.site-info li:last-child { padding: 0; }

ul.site-info a {
  padding: 0;
  margin: 0;
  color: inherit;
  line-height: 200%;
  text-decoration: none;
}

.site-info a:hover { text-decoration: underline; }

.social-media { display: inline-block; }
.facebook { margin: 0 5px 0 0; }
.instagram { margin: 0; }

.copyright {
  padding: 5px 0 0 0;
  margin: 0;
  font-size: 10px;
  line-height: 150%;
}

/* end of page footer */

.mx  { margin: 20px 0 0 0; }
.ml  { margin: 20px 0 0 20px; }
.mr  { margin: 20px 20px 0 0; }
.mlr { margin: 20px 20px 0 20px; }
.mtr { margin: 0 20px 0 0; }
.mtl { margin: 0 0 0 20px; }

div.trending { order: 1; }
div.guide { order: 2; }
div.trending-links /*, div.xguide*/ { order: 3; }

/* mobile stuff */
@media screen and (max-width: 323px) {

  .featured-wrap { padding: 0 !important; }

  .tile-wrapper { margin: 15px 0 15px 0; }  /* { margin: 15px 0 15px 0; } */

  .tile { margin: 15px 0 15px 0; }

  .tile-contents {
    width: 100%;
    border-radius: 0;
    border-top: 3px solid #ff9914;
    border-bottom: 3px solid #ff9914;
  }

  .trending-links {
    width: auto;
    padding: 20px 20px 20px 20px;
    margin: 20px 15px 20px 15px;
    border-radius: 0;
  }

  div.trending { order: 1; }
  div.trending-links { order: 2; }
  div.guide /*, div.xguide*/ { order: 3; }

  .modal-box { padding: 0 0 20px 0; }

  table.v-list { margin-left: 30px; }
}

@media screen and (max-width: 594px) {

  .info-container {
    max-height: 50vh; overflow: scroll;
    line-height: 140%;
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-radius: 0;
  }

  /* stack 'em */
  .featured-wrap-col {
    flex-direction: row;
    padding-bottom: 0;
  }

  .best-products-wrapper {
    width: 100%;
    padding: 10px 20px 10px 20px;
    margin: 5px 15px 5px 15px;
  }

  .best-products-title {
    border-radius:  0 0 0 0 !important;
  }

  .bbw {
    padding: 0;
    margin: 0 0 10px 0;
    background-color: var(--body-background);
    /*border-top: 3px solid #ff9914;
    border-bottom: 3px solid #ff9914;*/
  }

  .modal-box { padding: 0 0 20px 0; }

  table.v-list, table.v-list + p { margin: 0 20px 0 20px; }

  .tile-wrapper { margin-top: 0; }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
@media screen and (max-width: 1023px) {
  header {
    position: fixed; top: 0; left: 0; z-index: 5;
    display: block;
    width: 100%; height: 60px;
    padding: 0; margin: 0;
    background-color: var(--header-background-1);
  }

  #logo img { margin: 12px -5px 0 0; }

  /* the wrapper is needed for the border 
  around the nav toggle to position properly */

  .nav-toggle-wrapper {
    position: fixed; top: 0; left: 0; z-index: 99;
    /*position: absolute;
    top: 0; left: 0;*/
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .nav-toggle {
    padding: 5px 10px 5px 10px;
    margin: 0 0 0 20px;
    border: 1px solid var(--nav-toggle-border);
    border-radius: 5px;
    cursor: pointer;
  }

  .top-bar, .middle-bar, .bottom-bar {
    height: 2px;
    width: 1.5em;
    background-color: var(--menu-bar);
    transition: 0.4s;
  }

  .top-bar, .bottom-bar {
    padding: 0; margin: 0;
  }

  .middle-bar {
    padding: 0;
    margin: 6px 0 6px 0;
  }

  .nav-x.top-bar { transform: rotate(45deg) translate(6px, 6px); }
  .nav-x.middle-bar { opacity: 0; }
  .nav-x.bottom-bar { transform: rotate(-45deg) translate(5px, -5px); }

  .logo-wrapper {
    display: flex;
    justify-content: center;
  }

  .nav-active-category, .nav-active-product { color: var(--tbbg-color); }
  .nav-show-products { height: auto; opacity: 1; transition: height 0ms 0ms, opacity 1s 0ms; }

  nav {
    position: absolute;
    top: 60px; left: 0; z-index: 999;
    width: 100%;
    padding: 0; margin: 0;
    background-color: #3c3734;
    text-align: left;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    border-bottom: 4px solid #ff8000;
  }

  nav ul {
    padding: 0;
    margin: 0 0 0 20px;
    list-style: none;
  }

  nav ul li {
    margin: 20px 0 20px 0;
    cursor: pointer;
    color: var(--nav-text);
    opacity: 1; /*0*/
    transition: opacity 150ms ease-in-out;
  }

  nav ul li ul {
    overflow: hidden; /*Hide the element content, while height = 0 */
    height: 0; opacity: 0;
    transition: height 0ms 1s, opacity 1s 0ms;
    padding: 0 0 0 20px;
    margin: 0 0 0 0;
  }

  nav ul li ul li:first-child { margin: 15px 0 20px 0; }
  nav ul li ul li:last-child { margin: 20px 0 0 0; }

  nav li ul li a { text-underline-position: under; }

  nav li ul li a:link, nav ul li a:link { color: var(--nav-text); }
  nav li ul li a:visited, nav ul li a:visited { color: var(--nav-text); }
  nav li ul li a:hover, nav ul li a:hover { color: var(--tbbg-color); }
  nav li ul li a:active, nav ul li a:active { color: var(--tbbg-color); }

  .nav-show { transform: scale(1, 1); }
  .nav-item-show { opacity: 1; transition: opacity 250ms ease-in-out 250ms; }
  .showit { height: auto; opacity: 1; transition: height 0ms 0ms, opacity 1s 0ms; }

  .active-nav-item { color: var(--tbbg-color); }

  .hide { display: none; }
  .show { display: block; height: auto; opacity: 1; }

  main { position: relative; top: 60px; left: 0; /*background-color: red; */ padding: 0 0 10px 0; }
  footer { position: relative; top: 60px; left: 0; }

  .modal {
    left: 0; top: 60px;
  }
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (min-width: 1024px) {
  .nav-toggle-wrapper { display: none; }
  .logo-wrapper { display: block; }

  header {
	  width: 100%; height: 80px;
	  padding: 0; margin: 0;
    background-color: var(--header-background-2);
  }

  #logo img { margin: 19px -5px 0 0; }

  #bbg { margin: 21px 0 0 0; }

  .nav-active-category, .nav-active-product { color: var(--tbbg-color); cursor: default; }
  .nav-show-products { display: block; }

  nav ul {
    float: left; position: relative;
    padding: 0;
    width: 60%;
	  margin: 25px auto 0 auto;
	  list-style: none;
	  text-align: center;
	  color: var(--nav-text);
    cursor: pointer;
  }

  nav ul li {
	  display: inline-block;
	  padding: 0 10px 0 10px;
    margin: 0;
  }

  .home { margin: 0 0 -2px 0; }
  .here { color: var(--tbbg-color); cursor: default; } 

  nav ul li:hover { color: var(--tbbg-color) !important; }

  nav ul li ul {
	  display: none;
	  position: absolute;
    left: 0;
    width: 100%;
	  padding: 0;
	  margin: 0;
	  text-align: center;
  }

  nav ul li ul li {
	  display: inline-block;
	  padding: 0 10px 0 10px;
	  margin: 10px 0 0 0;
	  font-size: 90%;
  }

  nav ul li ul li a:link, nav ul li a:link { color: var(--nav-text); }
  nav ul li ul li a:visited, nav ul li a:visited { color: var(--nav-text); }
  nav ul li ul li a:hover, nav ul li a:hover { color: var(--tbbg-color); }
  nav ul li ul li a:active, nav ul li a:active { color: var(--tbbg-color); }
}

nav ul li a { text-decoration: none; }
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */