/*
	Website Name: Burlington Used Auto Parts
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 31 July 2024
*/

html {
	font-size: 16px;
}
body {
	background-color: #262262;
	color: #fff;
	font-family: "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
}
#pgHeader {
	background: #262262;
		background: linear-gradient( to bottom, #262262 0%, #262262 33.2%, #fff 33.3%, #fff 51%, #262262 51.1%, #262262 100% );
	color: #fff;
	position: relative;
}

#pgHeader .wrapper {
	display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
}

#logoBlock, #phones, #mainMenu, #social {
	flex: 1 0 auto;
	margin: auto;
	position: relative;
	text-align: center;
}

#logo {
	display: block;
		max-width: 350px;
	padding: 1em;
}
#logo img {
	display: block;
		width: 100%;
		height: auto;
}

#contact {
	text-align: center;
}
#contact h1 {
	color: #ffed00;
	font-family: Oswald, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 2rem;
	font-weight: 700;
}
#contact h2 {
	color: #fff;
	font-family: Oswald, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	padding-top: .5rem;
}
#contact address {
	font-style: italic;
	padding-top: 1rem;
}
#contact .mobile {
	display: none;
}
#contact .mobile h1 a[href^="tel"] {
	display: block;
	padding: .25rem .5rem;
}

#social {
	display: block;
	position: fixed;
		top: calc( 50% - 2rem );
		left: 0;
	z-index: 50;
}

#pgHeader.sticky-menu {
	background: #262262;
		background: linear-gradient( to bottom, #262262 0%, #262262 26.9%, #fff 27%, #fff 45%, #262262 45.1%, #262262 100% );
	box-shadow: 0 .01rem .5rem rgba( 0,0,0,0.7 );
	color: #fff;
	position: fixed;
		top: 0;
		z-index: 100;
	text-align: right;
	width: 100%;
}
#pgHeader.sticky-menu #logo {
	float: left;
	max-width: 150px;
	margin: 0;
	padding: 1rem;
}

#mainMenu {
	background: #ec1c24;
	color: #fff;
	display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	font-family: Oswald, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}
#menuBtn span.hamburger {
	background-color: #fff;
}
#mainMenu a {
	text-decoration: none;
}
#navMenu {
	flex: 1 0 auto;
	text-align: left;
}
#navMenu li {
	display: inline-block;
	padding: 1rem;
}
#navMenu .mobile {
	display: none;
}
#menuBtn:hover, #menuBtn.active, #navMenu li:hover {
}
#navMenu li.parent:hover {
}
#navMenu li.parent ul {
	background-color: #2e3191;
	box-shadow: 3px 3px 3px rgba( 0,0,0,.7 );
	color: #fff;
	display: none;
	margin: 1rem 0 0 -1rem;
	text-align: left;
}
#navMenu li.parent ul li {
	display: block;
	color: #fff;
}
#navMenu li.parent span.parent::after {
	content: "\25BE ";
}
#navMenu li.parent:hover ul, #navMenu ul.submenu {
	display: block;
	position: absolute;
	z-index: 150;
}
#menuBtn:hover, #menuBtn.active, #navMenu li:hover {
	background-color: #2e3191;
	color: #fff;
}
#navMenu li.parent ul li:hover {
	background-color: #ec1c24;
}

#navBarInfo {
	flex: 1 0 auto;
	font-family: "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-align: right;
	text-transform: none;
}
#navBarInfo a:hover {
	color: #fcc;
}
#navBarInfo a[href^="tel"]:hover {
	color: inherit;
	cursor: default;
}
#navBarInfo li {
	display: inline-block;
	padding: 0 1rem;
}
#navBarInfo li:hover {
	background-color: inherit;
	color: inherit;
}

section .container {
	padding: 1rem;
}

#hero {
	background-attachment: fixed;
	background-blend-mode: overlay;
	background-color: rgba( 0,0,0,.3);
	background-position: center center;
	background-size: cover;
	display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
}
#hero.home {
	background-attachment: scroll;
	background-image: url( "../graphics/aerial.jpg" );
	background-size: 100% auto;
	min-height: 35vw;
}

#hero .container {
	flex: 0 1 auto;
	padding: 4rem 0;
}
#hero h1 {
	color: #ec1c24;
	font-family: Genos, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 4rem;
	font-weight: 700;
	letter-spacing: .05em;
	margin-top: -1em;
	text-align: center;
	text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, .05em .05em 0 rgba( 0,0,0,.7);
	text-transform: uppercase;
}
#hero h2 {
	font-family: Oswald, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}
#hero.contactPg {
	background-image: url( "../graphics/yura-fresh-xezXEh_fIeU-unsplash.jpg" );
	background-position: center center;
	background-blend-mode: overlay;
	min-height: 25vw;
}
#hero.searchPg {
	background-image: url( "../graphics/engine.jpg" );
	background-position: center center;
	min-height: 25vw;
}
#hero.junkPg {
	background-image: url( "../graphics/suvkeyscash.jpg" );
	background-position: center center;
	min-height: 25vw;
}
#hero.carsPg {
	background-attachment: scroll;
	background-image: url( "../graphics/cars-for-sale.jpg" );	
	background-position: center center;
	min-height: 25vw;
}
#hero.searchPg h1, #hero.junkPg h1, #hero.contactPg h1 {
	margin: auto;
}
#hero.contactPg i {
	font-size: 4rem;
	margin: 0 .25em;
}


#imgNav {
	background-color: #fff;
}
#imgNav .container, #gallery {
	display: flex;
		flex-flow: row nowrap;
	max-width: 1600px;	
}
#imgNav .flex-box {
	background-size: cover;
	background-color: rgba( 0,0,16,0.6 );
	background-position: center center;
	background-blend-mode: overlay;
	color: #fff;
	flex: 0 1 auto;
	margin: 2rem auto;
	padding: 5rem 1rem;
	text-align: center;
	text-shadow: 0 0 .05em #000;
	width: calc( 25% - 4rem );
}
#imgNav .flex-box h1 {
	border-bottom: 1px solid #fff;
	font-family: Oswald, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: .75rem;
	padding-bottom: .75rem;
}
#imgNav .flex-box:hover {
	background-color: rgba( 255,255,255,0.8 );
	background-blend-mode: lighten;
	color: #111;
}
#imgNav .flex-box:hover h1 {
	border-bottom-color: #111;
}
#imgNav a.box {
	text-decoration: none;
}
#partsBox {
	background-image: url( "../graphics/engine.jpg" );
}
#junkBox {
	background-image: url( "../graphics/suvkeyscash.jpg" );
}
#mapBox {
	background-image: url( "../graphics/entrance.jpg" );
}
#contactBox {
	background-image: url( "../graphics/yura-fresh-xezXEh_fIeU-unsplash.jpg" );
}

#bizHrs {
	display: inline-block;
}
#bizHrs h1, #imgNav .flex-box #bizHrs h1 {
	border-bottom: none;
	padding-bottom: 0;
	font-size: 1rem;
}
#bizHrs .left {
	padding-right: 1rem;
}

.content {
	background-color: #fff;
	color: #000;
	padding: 2rem 0;
}
.content h1.pg-title {
	display: none;
	font-family: Oswald, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-weight: 700;
	padding-bottom: 2rem;
	text-transform: uppercase;
}
#contactPg.content h1.pg-title {
	display: block;
	text-align: center;
}

.left-aside .container, .right-aside .container {
	display: flex;
		flex-flow: row nowrap;
		align-items: center;
}

.left-aside main, .right-aside main {
	flex: 0 1 auto;
	max-width: 65ch;
}
.center-aside aside {
	flex: none;
	max-width: 1000px;
	margin: auto;
	padding: 2rem;
	text-align: center;
}
.left-aside aside, .right-aside aside {
	max-width: 300px;
	padding: 2rem;
	text-align: center;
}
.left-aside aside img, .right-aside aside img, .center-aside aside img {
	display: block;
		width: 100%;
		height: auto;
	margin: auto;
}
.right-aside aside {
	order: 2;
}
.center-aside aside.small-aside img {
	display: inline-block;
		max-width: 400px;
		height: auto;
	margin: 0 1rem;
}

main.lg-content {
	font-size: 1.5rem;
	line-height: 1.5em;
}

ul.hours, ul.hours li.time {
	clear: both;
	display: block;
}
ul.hours:after{
	clear: both;
	content: "";
	display: table;	
}

figure figcaption {
	font-family: Oswald, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: .9rem;
	font-weight: 400;
	padding: .5rem 0 1rem 0;
	text-align: center;
}


#homePg, #contactPg, #sellPg, #mapPg, #searchPg {
	padding: 2rem 0 0 0;
}
.content main p, #sellPg aside p, #contactPg aside p {
	line-height: 1.25em;
	margin-bottom: 1rem;
}
.content main ul {
	margin-bottom: 1rem;
}

#contactPg .cForm, #sellPg .cForm {
	width: calc( 1200px - 320px - 2rem )
}


#fb-feed {
	text-align: center;
}

.content main p {
	line-height: 1.25em;
	margin-bottom: 1em;
}
.content main a:hover {
	background-color: #ffed00;
}
.content main ul {
	margin-bottom: 1rem;
}


ul.directions {
	list-style-type: none;
}
ul.directions li {
	font-weight: 700;
	margin-bottom: .25em;
}
ul.directions ul, ul.features {
	list-style-type: square;
	margin: .25em 1em 1em 3em;
}
ul.directions ul li, ul.features li {
	font-weight: 400;
	margin-bottom: .25em;
}
#map {
	display: block;
		width: 100%;
		height: 30vw;
}
#map iframe {
	display: block;
		width: 100%;
		height: 100%;
}
#mapLink {
	display: none;
}

section.dk-blue {
	background-color: #262262;
	color: #fff;
}

#pgFooter {
	font-size: .9rem;
	padding: 1em;
}
#pgFooter .wrapper {
	display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
}
#pgFooter .wrapper .col {
	flex: 0 1 auto;
	margin: 2rem auto;
	text-align: center;
	text-shadow: 0 0 .05em #000;
	width: calc( 33% - 4rem );
}
#pgFooter h1 {
	font-family: Oswald, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25em;
	margin-bottom: 1em;
	text-transform: uppercase;
}
#pgFooter ul.contacts {
	padding-top: .5em 0;
}
#pgFooter ul.contacts li {
	padding: .5em 0;
}
#pgFooter ul.pymt {
	max-width: 15em;
	margin: auto;
	text-align: center;
}



a.btn {
	text-decoration: none;
}
div.btn, ul.btn li {
	font-family: Oswald, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-weight: 700;
	padding: 1rem;
	text-transform: uppercase;
}
.action-btn {
	background-color: #262262;
	border: 3px solid #fff;
	border-radius: 2em;
	color: #fff;
	font-family: Oswald, "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 1rem 2rem;
	padding: 1rem;
}
.action-btn:hover {
	background-color: #ec1c24;
}

.container {
	margin: 0 auto;
	max-width: 1200px;
}

@media screen and ( max-width: 1299px ) {
	section.content, #homePg, #contactPg, #sellPg, #mapPg, #searchPg {
		max-width: 100vw;
		padding-left: 2.5rem;
	}
	#hero {
		padding-left: 2rem;
	}
}
@media screen and ( max-width: 1199px ) {
	#pgHeader .desktop {
		display: none;
	}
	#pgHeader, #pgHeader.sticky-menu {
		background: #262262;
			background: linear-gradient( to bottom, #262262 0%, #262262 37.9%, #fff 38%, #fff 47%, #262262 47.1%, #262262 100% );
	}
	#logo {
		max-width: 150px;
	}
	#navMenu {
		background-color: #262262;
		color: #fff;
	}
	#navMenu li {
		color: #fff;
		display: block;
		padding: .5em;
		padding-left: 2.5em;
		position: relative;
	}
	#navMenu li:hover {
		background-color: #ec1c24;
		color: #fff;
	}
	#mainMenu li.mobile, #contact .mobile {
		display: block;
	}
	#mainMenu li.desktop, #contact .desktop {
		display: none;
	}
	#navBarInfo {
		display: none;
	}
	#social {
		display: block;
	}
	
	#hero.home {
		background-attachment: none;
		min-height: 40vw;
	}
	#hero h1 {
		font-size: 2rem;
	}
	
	#contact .mobile {
		color: #fff;
		display: block;
			width: auto;
		float: right;
		font-weight: 700;
		padding-right: 1rem;
	}
	#contact .mobile li {
		line-height: 1.5em;
		padding: 2rem 0;
	}

	
	#imgNav .container, #gallery {
		display: block;
	}
	#imgNav .flex-box {
		display: block;
			width: 80%;
		flex: none;
	}
	
	.left-aside .container, .right-aside .container, .left-aside main, .right-aside main, .left-aside aside, .right-aside aside {
		display: block;
		flex: none;
		order: 0;
		margin: auto;
	}
	
	#map {
		height: 33vw;
	}
	ul.pymt .cc {
		background-size: auto 100%;
		border-radius: 3px;
		font-size: 10px;
	}

	#pgFooter .wrapper {
		display: block;
	}
	#pgFooter .wrapper .col {
		display: block;
		flex: none;
		width: 90%;
		margin: 2rem auto;
	}
}