/* Global Styles
================================================================================================================ */
body {
	font-family: 'Open Sans', sans-serif;
	font-size: .95em;
	line-height: 1.5;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6											{ font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif; }
h1											{ color: rgba(140,0,0,1); }
*											{ box-sizing: border-box; }


/* Backgrounds and Background Colors
================================================================================================================ */
body                                   { background: rgba(100,100,100,.2); } /*  { background: url(../img/flower-bg.jpg) repeat-x; } */
header,
.main-title-mobile                     { background: url(../img/main-graphic-9.jpg) no-repeat center; }
#history,
.history-main-title-mobile             { background: url(../img/history-main-graphic.jpg) no-repeat left top; box-sizing: unset; }
.main-logo                             { background: rgba(255,255,255,.9); }
.main-nav a                            { background: rgba(255,255,255,.9); }
.main-title                            { background: none; }
.content-row li                        { background: rgba(255,255,255,.7); }
.content-row a                         { background: rgba(140,0,0,1); }
#street-view,
#map-view                              { background: rgba(100,100,100,.9); }
a[href^="tel"]                         { background: none; }
.services-content-wrapper,
.products-content-wrapper              { background: rgba(255,255,255,.9); }
.products-vendor-party                 { background: url(../img/products.jpg) center; }
.showroom-main-graphic                 { background: url(../img/showroom-one.jpg) center; }
.showroom-content-wrapper,
.story-text-wrapper,
.contact-content-wrapper,
.showroom-main-graphic a               { background: rgba(255,255,255,1); }
#map                                   { background: url(../img/google-map-blur.jpg); }
.jiffy-set-main-graphic                { background: url(../img/jiffy-set-main-graphic.jpg) no-repeat top; }
#jiffy-set-bottom                      { background: url(../img/bosses-involved.jpg) top; }
.history-one                           { background: url(../img/front-entry.jpg); }


/* Typography Colors and Shadows
================================================================================================================ */
a,
a:visited                              { color: rgba(0,0,0,1); }
.main-header h2,
.main-header p,
.history-one h2,
.main-title-mobile,
.history-main-title-mobile             { color: rgba(255,255,255,1); text-shadow: 1px 1px 1px rgba(0,0,0,.9); }
.showroom-main-graphic a,
.showroom-main-graphic a:visited       { color: rgba(140,0,0,1); }
.showroom-main-graphic a:hover         { color: rgba(0,0,0,1); }
.main-logo a,
.content-row-title,
.services-list-title,
#jiffy-set-banner em,
.contact-name                          { color: rgba(140,0,0,1); text-shadow: none; }
#menu-icon                             { background: url(../img/mobile-nav-button-trans.png) center; }
.main-nav a                            { color: rgba(0,0,0,1); }
.main-nav a:hover                      { color: rgba(50,50,50,.7); }
.mobile-title p                        { color: rgba(255,255,255,.9); text-shadow: 2px 1px 5px rgba(0,0,0,.7); }
.content-row a                         { color: rgba(255,255,255,1); text-shadow: 0px -1px 1px rgba(0,0,0,.7); }
a[href^="tel"]                         { color: black; text-shadow: none; }
#get-directions a                      { color: rgba(0,0,0,1); }
#get-directions a:hover                { color: rgba(0,0,0,.7); }
#showroom-bottom h1,
#jiffy-set-bottom h1                   { color: rgba(255,255,255,.9); text-shadow: 0px 0px 10px rgba(0,0,0,.9); }
.main-footer,
.footer-link                           { color: rgba(100,100,100,1); }
.main-footer,
.main-footer a						   { background-color: black; color: white; }
.qlicon								   { color: rgba(140,0,0,1); }


/* Main Header Styles
================================================================================================================ */
.main-header,
.main-title,
.mobile-title,
.content-row {
	width: 100%;
}

.main-nav,
.content-row,
.main-footer {
	list-style-type: none;
	text-align: center;
}

.main-logo,
.history-main-logo,
.main-header h2,
.main-header p,
.main-nav a {
	text-align: center;
	font-weight: 300;
}

header {
	background-size: cover;
	position: fixed;
	width: 100%;
	height: 46px;
	z-index: 999;
}

.main-logo,
.history-main-logo {
	margin: 0;
	padding: 0;
}

.main-logo a::after {
	content: url(../img/jbl-logo-three-doors-tablet.png);
}

.history-main-logo a::after {
	content: url(../img/jbl-logo-three-doors-tablet.png);
}

.main-logo img,
.history-main-logo img {
	width: 40px;
	position: relative;
	top: 5px;
	margin-right: 10px;
}

.browsing-page-header {
	margin: 0;
	padding: 46px 10px 0 10px;
}


/* Main Menu Show/Hide Styles
================================================================================================================ */
#menu-icon {
	display: inline;
	position: absolute;
	top: 5px;
	width: 40px;
	height: 40px;
}

.main-nav, 
nav:active .main-nav {
	display: none;
}


/* Main Navigation Styles
================================================================================================================ */
.main-nav a {
	display: block;
	padding: 15px 0;
	font-weight: 400;
	border-bottom: 1px solid rgba(100,100,100,.5);
}


/* Main Title Styles
================================================================================================================ */
.main-title-mobile h2,
.main-title-mobile p,
.history-main-title-mobile {
	font-size: 1.85em;
	font-weight: 400;
	margin: 0;
}

.main-title,
.history-main-title {
	display: none;
}

.main-title-mobile,
.history-main-title-mobile {
	display: inline-block;
	background-size: cover;
	width: 100%;
	height: 190px;
	padding-top: 50px;
}


/* Main Content Styles
================================================================================================================ */
.content-row li {
	margin: 5px;
	padding: 15px;
	border-radius: .5em;
	border-top: 1px solid rgba(100,100,100,.2);
	border-right: 1px solid rgba(100,100,100,.2);
	border-bottom: 3px solid rgba(100,100,100,.3);
	border-left: 1px solid rgba(100,100,100,.2);
}

.left {
	text-align: left;
	padding: 0 0 10px 0;
}

.left::first-letter {
	font-size: 1.25em;
}

.content-row-title {
	font-family: 'Playball', cursive;
	font-size: 1.75em;
	margin: 0;
	padding: 5px 0 0 0;
}

.content-row a {
	border-radius: .5em;
	padding: 5px;
	margin: 5px;
	border-bottom: 2px solid rgba(102,0,0,1);
}

a[href^="tel"] {
	position: relative;
	top: -15px;
	padding: 5px;
	border-radius: none;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}


/* Main Product Banner Styles
================================================================================================================ */
#product-banner {
	padding: 27px 10px; 
	background-blend-mode: multiply; 
	background-size: cover; 
	background-position: 50%; 
	background-repeat: no-repeat; 
	background-image: url("../img/lightgrey.jpg");
}


/* Main Link Grid Styles
================================================================================================================ */
#link-grid {
	height: auto;
	width: 100%;
	display: inline-block;
	background-size: 100% auto;
	background-position: 20%;
}

.link-grid-borders {
	border-top: 8px solid white;
	border-right: 4px solid white;
	border-left: 4px solid white;
}

.link-grid-section {
	/* width: 900px; */
	margin-left: auto;
	margin-right: auto;
	display: contents;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.6);
}

.link-grid-button {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 75px;
	float: left;
}

.link-grid-button:hover {
	cursor: pointer;
	background-image: initial;
	background-color: rgba(255,255,255,0.52);
}


/* Main Footer Styles
================================================================================================================ */
.main-footer h3,
.main-footer span {
	display: inline-block;
}

.main-footer {
	text-align: center;
	vertical-align: middle;
}

.main-footer span {
	font-size: .8em;
}

.main-footer li:first-child {
	padding: 25px 0;
}

.main-footer li {
	padding: 0 0 25px 0;
}

.main-footer a:hover {
	text-decoration: underline;
}


/* Browsing Header Styles
================================================================================================================ */
/* .browsing-inside-header > * {
	vertical-align: middle;
}

.browsing-inside-header {
	margin: auto;
}

.browsing-header {
	width: 100%;
	height: 80px;
	position: fixed;
}

.browsing-inside-header {
	position: initial;
} */


/* Services Content Styles
================================================================================================================ */
.services-content-wrapper {
	width: 100%;
	margin: auto;
	padding: 0 10px;
}

.services-content {
	padding: 10px;
}

.services-list-title {
	font-family: 'Playball', cursive;
	font-size: 1.75em;
	text-align: center;
	padding: 1%;
}

.services-list-content {
	padding: 1%;
}

.services-content img {
	width: 100%;
}


/* Products Content Styles
================================================================================================================ */
.products-content-wrapper h2,
.products-content p,
.products-content span {
	font-weight: 300;
}

.products-content-wrapper {
	width: 100%;
	margin: auto;
}

.products-content p {
	line-height: 2.15;
	text-align: center;
	margin: 0;
	padding: 10px 0 5px 0;
	border-bottom: 1px solid  rgba(200,200,200,.5);
	box-shadow: 0px 5px 5px rgba(200,200,200,.2);
	cursor: pointer;
}

.products-content p::before {
	content: "\21c5 \a0";
}

.products-by-vendor-list {
	margin-left: 25px;
	display: none;
}

.products-by-vendor-list li {
	display: inline-block;
	vertical-align: middle;
}

.products-by-vendor-list img {
	padding: 5px;
	width: 100px;
}

.products-vendor-party {
	height: 200px;
	clear: both;
	background-size: cover;
	text-align: center;
}


/* Showroom Content Styles
================================================================================================================ */
.showroom-main-graphic a {
	padding: 5px;
	box-shadow: 0	0 5px rgba(0,0,0,.5);
}

#emtek-promo-tile span,
#schlage-promo-tile span,
#bobrick-promo-tile span,
#creations-promo-tile span {
	display: none;
}

.showroom-features ul,
.showroom-features li,
.showroom-features p {
	vertical-align: middle;
}

.showroom-content-wrapper {
	background-size: cover;
	width: 100%;
	margin: auto;
}

.showroom-narrow-wrapper {
	width: 100%;
	margin: auto;
}

.showroom-main-graphic {
	height: 350px;
	background-size: cover;
}

.showroom-tiles {
	margin: 5px 0 25px 0;
}

.showroom-tiles li {
	display: inline;
}

.showroom-tiles img {
	width: 100%;
}

#map {
	clear: both;
	background-size: contain;
	font-weight: 300;
	box-shadow: 0px 5px 15px rgba(0,0,0,.5) inset;
}

#map h2 {
	margin: 0;
}

.directions-wrapper {
	text-align: center;
	box-sizing: unset;
}

#get-directions {
	font-weight: 300;
}

#get-directions:hover {
	text-decoration: underline;
}

.showroom-features {
	margin-top: 25px;
	border-bottom: 1px solid black;
}

.showroom-features p {
	width: 98%;
	padding: 0 1%;
}

.showroom-features li {
	display: inline-block;
}

.showroom-features img {
	width: 100%;
}


#showroom-bottom {
	display: none;
}

#showroom-content-wrapper-bottom {
	display: none;
}


/* Jiffy Set Content Styles
================================================================================================================ */
.jiffy-set-features ul,
.jiffy-set-features li,
.jiffy-set-features p,
.jiffy-set-features img {
	vertical-align: middle;
}

#jiffy-set-banner {
	padding-top: 25px;
}

#jiffy-set-banner em {
	font-family: 'Playball', cursive;
	font-size: .65em;
	font-style: normal;
}

.jiffy-set-main-graphic {
	height: 250px;
	background-size: contain;
}

.showroom-narrow-wrapper h3 {
	font-weight: 300;
	padding: 0 10px;
}

.jiffy-set-features {
	margin: auto;
}

.jiffy-set-features li {
	display: inline-block;
	padding: 10px;
}

.jiffy-set-features p {
	margin: 0;
	padding: 0;
	width: 100%;
}

.jiffy-set-features img {
	border-radius: .5em;
}

#jiffy-set-bottom {
	display: none;
}

#jiffy-set-bottom h1 {
	font-weight: 300;
	font-size: 4em;
}

.showroom-narrow-wrapper a {
	color: blue;
	text-decoration: none;
}

.showroom-narrow-wrapper a {
	text-decoration: underline;
}


/* Contact Page Styles
================================================================================================================ */
.contact-content-wrapper {
	width: 100%;
}

.contact-content {
	width: 100%;
	margin: auto;
}

.contact-content span {
	display: inline-block;
	padding: 1%;
}

.contact-content em {
	display: none;
}

.contact-content input[type=search] {
	width: 55px;
	margin: 1%;
	padding: 1%;
	border-radius: .5em;
	border: 1px solid rgba(100,100,100,.5);
	outline: none;	
	transition: all .5s;
}

.contact-content input[type=search]:focus {
	width: 80%;	
}

.contact-list {
	padding-bottom: 30px;
}

.contact-list li {
	display: inline-block;
	width: 95%;
	margin: 1%;
	padding: 1%;
	border-radius: .5em;
	border-top: 1px solid rgba(200,200,200,.3);
	border-right: 1px solid rgba(200,200,200,.5);
	border-bottom: 3px solid rgba(200,200,200,.7);
	border-left: 1px solid rgba(200,200,200,.5);
}

.contact-list p {
	margin: 0;
}

.contact-name,
.contact-name:visited {
	font-family: 'Playball', cursive;
	font-size: 1.5em;

}

.contact-name:hover {
	text-decoration: underline;
}


/* History Content Styles
================================================================================================================ */
#history,
.history-one {
	background-size: cover;
}

.history-header,
.history-one h2 {
	font-size: 2.25em;
	font-weight: 300;
	text-align: center;
	margin: 0;
	padding-top: 25px;
}

.story-text-wrapper {
	width: 100%;
}

.history-main-title {
	padding-top: 20px;
	padding-bottom: 140px;
	box-sizing: unset;
}

.story-text {
	padding: 10px;
	margin: 0;
	line-height: 1.35;
}

.history-one {
	height: 200px;
}


/* Simple Global Styles - these are at the bottom so they override anything above, just in case
================================================================================================================ */
.center {
	text-align: center;
}

.left {
	text-align: left;
}

.three-hundred {
	font-weight: 300;
}

.et_pb_row {
	margin: auto;
	position: relative;
	padding-top: 30px;
	padding-bottom: 20px;
}

.img-row {
	max-width: 100%;
	margin: 0 10%;
}

.img-row img {
	max-width: 100%;
}