body {background-color: #FFFFFF; margin: 0px;}

.bg_blue { background-color: #000053; position: sticky; }
#logo { background-image: url('imgs/BWA_logo_white.png'); background-position: center; background-repeat: no-repeat; height: 140px;}
.logo_home_link { height: 140px;}

* { font-family: Arial, sans-serif; }

.bgimg { background-image: url("imgs/home-web.jpg"); background-position: center; background-position-y: top; background-repeat: no-repeat; background-size: cover; }
	
#ghost_white:after { content: " "; z-index: 11; position: absolute; height: 93px; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.5); }
.state_dropdown { font-size: 18px; line-height: 32px; margin-top: 4px; font-family: Arial, Helvetica, Sans-Serif;}

.fine_print { color: #000000; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif;
		text-shadow: 1px 1px 2px #FFFFFF, 0 0 4px #FFFFFF, 0 0 2px #FFFFFF, 0 0 18px #FFFFFF, 0 0 14px #FFFFFF, 0 0 10px #FFFFFF; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
.dropdown-menu.show { -webkit-animation: fadeIn 0.3s alternate; animation: fadeIn 0.3s alternate; }
.nav-item.dropdown.dropdown-mega { position: static; }
.nav-item.dropdown.dropdown-mega .dropdown-menu { width: 90%; top: auto; left: 5%; }

.navbar-toggler { border: none; padding: 0; outline: none; margin-top: -20px;}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler .hamburger-toggle { position: relative; display: inline-block; width: 50px; height: 50px; z-index: 11; float: right; }
.navbar-toggler .hamburger-toggle .hamburger { position: absolute; transform: translate(-50%, -50%) rotate(0deg); left: 50%; top: 50%; width: 50%; height: 50%; pointer-events: none; }
.navbar-toggler .hamburger-toggle .hamburger span { width: 100%; height: 4px; position: absolute; background: #FFFFFF; border-radius: 2px; z-index: 1; 
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out; left: 0px;  }
  
.navbar-toggler .hamburger-toggle .hamburger span:first-child { top: 10%; transform-origin: 50% 50%; transform: translate(0% -50%) !important;  }
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) { top: 50%; transform: translate(0, -50%); }
.navbar-toggler .hamburger-toggle .hamburger span:last-child { left: 0px; top: auto; bottom: 10%; transform-origin: 50% 50%;  }
.navbar-toggler .hamburger-toggle .hamburger.active span { position: absolute; margin: 0; }
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child { top: 45%; transform: rotate(45deg); }
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) { left: 50%; width: 0px; }
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child { top: 45%; transform: rotate(-45deg); }

#nav_sm { display: block; }
#nav_full { display: none; }

.phones {font-size: 12px; color: #FFFFFF; font-family: Arial, Tahoma, Geneva, sans-serif; line-height: 20px;}
.phones a:link {color: #FFFFFF; text-decoration: none;  }
.phones a:hover {color: #997224; }
.phones a:active {color: #997224; }
.phones a:visited {color: #FFFFFF; }

.svg_icons_w { height: 30px; transition: all 0.2s ease-in-out; filter: invert(83%) sepia(55%) saturate(0%) hue-rotate(47deg) brightness(111%) contrast(101%); }
.svg_icons_w:hover { height: 30px; transition: all 0.2s ease-in-out; filter: invert(43%) sepia(78%) saturate(399%) hue-rotate(2deg) brightness(89%) contrast(92%); }

#header_phone { float: left; width: 20%; text-align: left; padding: 0px 0px 0px 0px; color: #FFFFFF; margin-top: 16px;
	font-weight: heavy; font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height:32px; text-shadow: 2px 4px 3px rgba(0,0,0,0.5);}
#header_phone a:link { color: #FFFFFF; }
#header_phone a:hover { color: #997224; }
#header_phone a:visited { color: #FFFFFF; }
#header_phone a:active { color: #997224; }

#header_mail { float: left; width: 20%; text-align: left; padding: 14px 0px 0px 0px; color: #FFFFFF; 
	font-weight: heavy; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-shadow: 2px 4px 3px rgba(0,0,0,0.5);}
#header_mail a:link { color: #FFFFFF; }
#header_mail a:hover { color: #997224; }
#header_mail a:visited { color: #FFFFFF; }
#header_mail a:active { color: #997224; }

#header_map { float: right; width: 20%; text-align: left; padding: 18px 0px 0px 0px; color: #FFFFFF; 
	font-weight: heavy; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-shadow: 2px 4px 3px rgba(0,0,0,0.5);}
#header_map a:link { color: #FFFFFF; }
#header_map a:hover { color: #997224; }
#header_map a:visited { color: #FFFFFF; }
#header_map a:active { color: #997224; }

#shadow { background:url('imgs/shadow.jpg'); background-repeat: repeat-x; height: 21px;} 

#head_space {margin-top:0px;}
.item_name { font-size: 28px; color: #333333; font-family: Tahoma, Geneva, sans-serif; font-weight: lighter;}
.social {float: left; text-align: left;}
.btn-circle { background-color: #FFFFFF; color: #666666; width: 36px; height: 36px; margin-top: 10px; text-align: center; padding: 3px; font-size: 16px; line-height: 1; border-radius: 18px; }

.red {color: #FF0000; }

#cart_but { margin-top: 10px; margin-left: 10px;}
.home_photo { border-style: inset;  border-color: 414042; border-width: 6px;} 

hr { border-top: 1px solid #999999; }
hr_white { border-top: 1px solid #FFFFFF; }

#small_foot_left { float: left; color: #FFFFFF;}
#small_foot_center { float: none; color: #FFFFFF;}
#small_foot_right { float: right; color: #FFFFFF;}

.tiny_w {font-size: 12px; color: #FFFFFF; font-family: Arial, Tahoma, Geneva, sans-serif; }
.tiny_w a:link {color: #FFFFFF;  }
.tiny_w a:hover {color: #CCCCCC; }
.tiny_w a:active {color: #FFFFFF; }
.tiny_w a:visited {color: #FFFFFF; }

.align-right { text-align: right; }

.char9 { color: #000000; font-weight: normal; font-size: 9px; font-family: Arial, Helvetica, sans-serif; }
.char12 { color: #000000; font-weight: normal; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

.char10 { color: #000000; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10 a:link { color: #000000; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10 a:hover { color: #666666; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10 a:visited { color: #999999; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10 a:active { color: #000000; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }

.char10w { color: #FFFFFF; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10w a:link { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10w a:hover { color: #997224; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10w a:visited { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char10w a:active { color: #333333; text-decoration:none; font-weight: normal; font-size: 10px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }

.char11 { color: #000000; font-weight: normal; font-size: 11px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char11 a:link { color: #000000; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char11 a:hover { color: #666666; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char11 a:visited { color: #999999; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char11 a:active { color: #000000; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }

.char11w { color: #FFFFFF; font-weight: normal; font-size: 11px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char11w a:link { color: #E5D0CF; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char11w a:hover { color: #666666; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char11w a:visited { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
.char11w a:active { color: #333333; text-decoration:none; font-weight: normal; font-size: 11px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }

.char12over16 { float: left; color: #000000; font-weight: normal; font-size: 12px; line-height: 16px; font-family: Georgia, Palatino, Times Roman, serif; }
.char12over16 a:link { float: left; color: #000000; text-decoration:none; }
.char12over16 a:hover { float: left; color: #666666; text-decoration:none; }
.char12over16 a:visited { float: left; color: #999999; text-decoration:none; }
.char12over16 a:active { float: left; color: #000000; text-decoration:none; }

.char12w { color: #FFFFFF; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char12w a:link { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char12w a:hover { color: #997224; text-decoration:none; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char12w a:visited { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char12w a:active { color: #333333; text-decoration:none; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }


.char14 { color: #000000; font-weight: normal; font-size: 14px; line-height: 20px; font-family: Georgia, Palatino, Times Roman, serif; }
.char14 a:link { color: #000000; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 20px; font-family: Georgia, Palatino, Times Roman, serif; }
.char14 a:hover { color: #666666; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 20px; font-family: Georgia, Palatino, Times Roman, serif; }
.char14 a:visited { color: #999999; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 20px; font-family: Georgia, Palatino, Times Roman, serif }
.char14_ital { color: #000000; font-style: oblique; font-weight: normal; font-size: 14px; line-height: 20px; font-family: Georgia, Palatino, Times Roman, serif; }

.char14w { color: #FFFFFF; font-weight: normal; font-size: 14px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char14w a:link { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char14w a:hover { color: #997224; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char14w a:visited { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char14w a:active { color: #333333; text-decoration:none; font-weight: normal; font-size: 14px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; }
.char14over20 { color: #000000; font-weight: normal; font-size: 14px; line-height: 20px; font-family: Arial, Tahoma, Geneva, sans-serif; }

.char16 { color: #000000; font-weight: normal; font-size: 16px; line-height: 28px; font-family: Georgia, Palatino, Times Roman, serif; }
.char16b { color: #000000; font-weight: bold; font-size: 16px; line-height: 28px; font-family: Georgia, Palatino, Times Roman, serif; }
.char16 a:link { color: #000000; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 28px; font-family: Georgia, Palatino, Times Roman, serif; }
.char16 a:hover { color: #666666; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 28px; font-family: Georgia, Palatino, Times Roman, serif; }
.char16 a:visited { color: #999999; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 28px; font-family: Georgia, Palatino, Times Roman, serif; }

.char16w { color: #FFFFFF; font-weight: normal; font-size: 16px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; }
.char16w a:link { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; }
.char16w a:hover { color: #997224; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; }
.char16w a:visited { color: #FFFFFF; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; }
.char16w a:active { color: #333333; text-decoration:none; font-weight: normal; font-size: 16px; line-height: 20px; font-family: Arial, Helvetica, sans-serif; }

.char20b { color: #000000; font-weight: bold; font-size: 20px; line-height: 30px; font-family: Georgia, Palatino, Times Roman, serif; }
.char18_ital { color: #000000; font-style: oblique; font-weight: normal; font-size: 18px; line-height: 20px; font-family: Georgia, Palatino, Times Roman, serif; }

.char26wserif { color: #FFFFFF; font-weight: lighter; font-size: 26px; line-height: 40px; font-family: Georgia, Palatino, Times Roman, serif; }
.char26rserif { color: #000053; font-weight: lighter; font-size: 26px; line-height: 40px; font-family: Georgia, Palatino, Times Roman, serif; }
.char26rserif a:link { color: #000053; font-weight: lighter; font-size: 26px; line-height: 40px; font-family: Georgia, Palatino, Times Roman, serif; }
.char26rserif a:hover { color: #666666; font-weight: lighter; font-size: 26px; line-height: 40px; font-family: Georgia, Palatino, Times Roman, serif; }
.char26rserif a:visited { color: #000053; font-weight: lighter; font-size: 26px; line-height: 40px; font-family: Georgia, Palatino, Times Roman, serif; }
.char26rserif a:active { color: #333333; font-weight: lighter; font-size: 26px; line-height: 40px; font-family: Georgia, Palatino, Times Roman, serif; }

.italic { font-style: italic; }
.bold { font-weight: 800; }

.google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } /* 75% because 450 / 600 = .75 */
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.but_blue {
   border: 2px solid #333333;
	background: -moz-linear-gradient(top, #000053 0%, #1A2575 100%);
	background: -webkit-linear-gradient(top, #000053 0%, #1A2575 100%);
	background: linear-gradient(to bottom, #000053 0%, #1A2575 100%);
   padding: 8px 12px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   color: #FFFFFF; font-size: 18px; font-family: Arial, Helvetica, Sans-Serif; line-height:18px;
   text-decoration: none;
   vertical-align: middle;
}
.but_blue:link { color: #FFFFFF; text-decoration: none; }
.but_blue:hover { background: #997224; text-decoration: none; }
.but_blue:visited { background: #000053; text-decoration: none; }
.but_blue:active { background: #997224; text-decoration: none; }

.but_reset {
   border: 2px solid #CC6600;
	background: -moz-linear-gradient(top, #333333 0%, #666666 100%);
	background: -webkit-linear-gradient(top, #333333 0%, #666666 100%);
	background: linear-gradient(to bottom, #333333 0%, #666666 100%);
   padding: 6px 12px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   color: #FFFFFF; font-size: 18px; font-family: Arial, Helvetica, Sans-Serif; line-height:18px;
   text-decoration: none;
   vertical-align: middle;
}
.but_reset:link { color: #FFFFFF; text-decoration: none; }
.but_reset:hover { background: #CC6600; text-decoration: none; }
.but_reset:visited { background: #D4D8A5; text-decoration: none; }
.but_reset:active { background: #463c3c; text-decoration: none; }

.but_go {
   border: 2px solid #007836;
	background: -moz-linear-gradient(top, #333333 0%, #666666 100%);
	background: -webkit-linear-gradient(top, #333333 0%, #666666 100%);
	background: linear-gradient(to bottom, #333333 0%, #666666 100%);
   padding: 6px 12px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   color: #FFFFFF; font-size: 18px; font-family: Arial, Helvetica, Sans-Serif; line-height:18px;
   text-decoration: none;
   vertical-align: middle;
}
.but_go:link { color: #FFFFFF; text-decoration: none; }
.but_go:hover { background: #007836; text-decoration: none; }
.but_go:visited { background: #D4D8A5; text-decoration: none; }
.but_go:active { background: #463c3c; text-decoration: none; }

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 576px) {
	.container { padding-right: 16px; padding-left: 16px; }
	.rp { display: inline;}
	#cart_but { margin-top: 0px;}
	.btn-circle { margin-top: 0px; }
	#ghost_white:after { z-index: -10; height: 168px; width:1100px; margin-right: auto; margin-left: auto; background-position: center; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	#nav_sm { display: none; }
	#nav_full { display: block; margin-top: -150px; }
	.svg_icons_w { margin-top: 10px; }
	.container { width: 100%; padding-right: 20px; padding-left: 20px;} 
	.social {float: left; text-align: right; width: 100%;}
	#ghost_white:after {  height: 168px; width:100%; margin-right: auto; margin-left: auto; }
}

@media only screen and (min-width : 992px) {
	.grid-item { width: 200px; height: 160px;}
	#decorative_line { max-height: 40px; width: 80%; }
}


/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	#cat_download { width:1050px; margin-right: auto; margin-left: auto; text-align: right; padding-right: 0px;}
	#header_text { display: block; margin-top: 300px; }
	#myNavbar {position: relative; width: 1200px; }
	.container { width: 1200px; padding-right: 30px; padding-left: 30px;}
	.contain_width { padding-right: 70px; padding-left: 70px;}
	.grid-container { grid-template-columns: auto auto auto auto auto auto;  }
	.grid-item { width: 200px; }
}

@media only screen and (min-width : 1500px) {
	.contain_width { padding-right: 100px; padding-left: 100px;}
}

.display_panel { max-height: 720px; max-width: 540px; margin: auto; }
.center_image { display: block; margin-left: auto; margin-right: auto;}
.item_thumb { display: inline; max-width: 70px; max-height: 70px; border: thin dotted #999999; padding: 4px;}
.logcell { text-align: right; right: 0; left: auto; }
#print_offer { font-size: 16px; text-decoration: none; font-style: italic; font-weight: bold; font-family: Arial, Helvetica, Sans-Serif; }

.svg_eye { height: 14px;}
.svg_eye:hover { filter: invert(20%) sepia(98%) saturate(7262%) hue-rotate(5deg) brightness(98%) contrast(119%);}


.navbar-custom { background-color: #000053; white-space: nowrap; }
.navbar-custom .navbar-brand, .navbar-custom .navbar-nav .nav-link { color: #ffffff; padding-right: 24px;  }
.navbar-custom .navbar-toggler-icon { background-color: #ffffff; }
.navbar-custom .navbar-toggler { border-color: #ffffff; }
.navbar-custom .nav-item.dropdown:hover .dropdown-menu a.dropdown-item:hover { color: #997224; background-color: #000053; }

ul#Navigation .active{ color: #FFCC33; }

#page-container { position: relative; min-height: 100vh; }
#content-wrap { padding-bottom: 150px; }
#footer_blue { background: #000053;  position: absolute; bottom: 0; width: 100%; height: 150px; }

.pad20 { padding: 20px;}
.pad10 { padding: 10px;}
.pad6 { padding: 6px;}
.pad2 { padding: 2px;}