/*
	Website Name: Ernie's Used Auto Parts
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 17 Nov 2022
*/

html {
	font-size: 18px;
}
body {
	background-color: #1d3e71;
	color: #fff;
	font-family: Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
}
#pgHeader {
	background-color: #fff;
	box-shadow: 0 5px 12px rgba( 21,21,21,.25 );
	color: #111;
	position: relative;
}
#highline {
	background-color: #111;
	color: #fff;
	font-size: .9rem;
	text-transform: uppercase;
}
#pgHeader .wrapper, #highline, #pgFooter .container {
	display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
}
#highline .col, #logoBlock, #phones, #mainMenu, #social, #pgFooter .col {
	flex: 1 0 auto;
	margin: auto;
	position: relative;
	text-align: center;
}
#highline .col {
	padding: .5rem;
}
#highline .col:first-of-type {
	text-align: left;
}
#highline .col:last-of-type {
	text-align: right;
}
#highline a {
	text-decoration: none;
}
#highline a:hover {
	text-decoration: underline;
}

ul#hlNav li {
	display: inline-block;
	padding: 0 1rem;
	text-align: right;
}
ul#hlNav li a {
	text-decoration: none;
}
ul#hlNav li a:hover, ul#hlNav li .jLink:hover {
	cursor: pointer;
	text-decoration: underline;
}

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

#contact {
	text-align: center;
}
#contact h1 {
	color: #cd4700;
	font-family: Oswald, Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 2rem;
	font-weight: 700;
}
#contact h2 {
	color: #fff;
	font-family: Oswald, Montserrat, Lato, "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;
}

#social li {
	display: inline-block;
}


#pgHeader .wrapper.sticky-menu {
	background-color: #fff;
	box-shadow: 0 .01rem .5rem rgba( 0,0,0,0.7 );
	position: fixed;
		top: 0;
		z-index: 100;
	text-align: right;
	width: 100%;
}
#pgHeader .wrapper.sticky-menu #logo {
	float: left;
	max-width: 200px;
	margin: 0;
	padding: 1rem;
}
#pgHeader .wrapper.sticky-menu #mainMenu {
	font-size: 1rem;
	padding-top: 1.1rem;
}

#mainMenu {
	display: block;
	font-family: Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: .8rem;
	font-weight: 700;
	padding: 1.25rem;
	position: relative;
	text-align: right;
	text-transform: uppercase;
}
#menuBtn {
	display: inline-block;
		vertical-align: middle;
	display: none;
	padding: .5em;
	text-align: center;
}
#menuBtn::after {
	content: "\f0c9";
	font-family: "Font Awesome 5 Free";
	font-size: 1.25em;
	font-weight: 700;
	margin-left: .5em;
}
#mainMenu a {
	text-decoration: none;
}
#mainMenu ul {
	display: inline-block;
}
#mainMenu ul li {
	display: inline-block;
	padding: 1rem;
}
#mainMenu .mobile {
	display: none;
}
#menuBtn:hover, #menuBtn.active, #mainMenu ul li:hover {
}
#mainMenu ul li.parent:hover {
}
#mainMenu ul li.parent ul {
	background-color: #cd4700;
	box-shadow: 3px 3px 3px rgba( 0,0,0,.7 );
	color: #fff;
	display: none;
	margin: 1rem 0 0 -1rem;
	text-align: left;
	z-index: 200;
}
#mainMenu ul li.parent ul li {
	display: block;
	color: #fff;
}
#mainMenu ul li.parent span.parent::after {
	content: "\25BE ";
}
#mainMenu ul li.parent:hover ul, #mainMenu ul ul.submenu {
	display: block;
	position: absolute;
}
#menuBtn:hover, #menuBtn.active, #mainMenu ul li:hover {
	background-color: #cd4700;
	color: #fff;
	text-shadow: none;
}
#mainMenu ul li.parent ul li:hover {
	background-color: #1d3e71;
	color: #fff;
	text-shadow: none;
}
#mainMenu ul li.current {
	border-bottom: 2px solid #cd4700;
}

section .container {
	padding: 1rem;
}

.hero {
	background-attachment: fixed;
	background-color: rgba( 255,255,255,.7);
	background-position: center center;
	background-size: cover;
	display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
}
/* #homeHero.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,.5);
	background-image: url( "../graphics/slides/shutterstock_744678226.jpg" );
	background-position: center 75%;
	background-size: 100% auto;
	background-blend-mode: darken;
	min-height: 25vw;
}
*/
#searchHero.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,.5);
	background-image: url( "../graphics/bigstock-wrecked-car-junkyard-97104527.jpg" );
	background-position: center center;
	background-size: 100% auto;
	background-blend-mode: darken;
	min-height: 15vw;
}
.hero .container {
	padding: 4rem 0;
}
.hero h1, #homeHero li.box-slide h1 {
	color: #fff;
	flex: 0 1 auto;
	font-family: Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 2.5rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-align: center;
	text-shadow: 1px 1px 0 #cd4700, -1px 1px 0 #cd4700, -1px -1px 0 #cd4700, 1px -1px 0 #cd4700, 2px 2px 0 #000, 1px 1px 3px #000;
}
.hero h2 {
	flex: 0 1 auto;
	font-family: Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1.4rem;
	font-style: italic;
	font-weight: 300;
	padding-top: 1rem;
	text-align: center;
}
#aboutHero.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,0.3 );
	background-image: url( "../graphics/storefront.jpg" );
	background-position: center 70%;
	background-blend-mode: overlay;
	min-height: 25vw;
}
#contactHero.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,0.7 );
	background-image: url( "../graphics/firmbee-com-SpVHcbuKi6E-unsplash.jpg" );
	background-position: top center;
	background-blend-mode: overlay;
	min-height: 25vw;
}
#partsInfo.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,0.7 );
	background-image: url( "../graphics/bigstock-wrecked-car-junkyard-97104527.jpg" );
	background-position: center center;
	background-blend-mode: overlay;
	color: #fff;
	min-height: 25vw;
}
#evBatteries.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,0.7 );
	background-image: url( "../graphics/dcbel-nhEIkTjKJ3k-unsplash.jpg" );
	background-position: center center;
	background-blend-mode: overlay;
	color: #fff;
	min-height: 25vw;
}
#wntyHero.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,0.7 );
	background-image: url( "../graphics/cytonn-photography-n95VMLxqM2I-unsplash.jpg" );
	background-position: center center;
	background-blend-mode: overlay;
	color: #fff;
	min-height: 25vw;
}
#payHero.hero {
	background-attachment: scroll;
	background-color: rgba( 0,0,0,0.7 );
	background-image: url( "../graphics/michelle-spollen-P22AFmgMuUc-unsplash.jpg" );
	background-position: center center;
	background-blend-mode: overlay;
	color: #fff;
	min-height: 25vw;
}

#partsInfo.hero h1 {
	margin-top: 2rem;
}
#partsInfo.hero p {
	margin: 1rem auto;
}

#homeHero {
	background-color: #fff;
	display: block;
		width: 100%;
		height: 25vw;
}

#homeHero li.box-slide {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		min-height: 100%;
}
#homeHero .box-slide.s1 {
	background-image: url( "../graphics/slides/shutterstock_744678226.jpg" );
}
#homeHero .box-slide.s2 {
	background-image: url( "../graphics/slides/shutterstock_507397177.jpg" );
}
#homeHero .box-slide.s3 {
	background-image: url( "../graphics/slides/shutterstock_1440939086.jpg" );
}
#homeHero .box-slide.s4 {
	background-image: url( "../graphics/slides/shutterstock_1488188285.jpg" );
}
#homeHero .box-slide.s5 {
	background-image: url( "../graphics/slides/shutterstock_383530684.jpg" );
}
#homeHero li.box-slide h1.light {
	color: #fff;
	text-shadow: 1px 1px 0 #cd4700, -1px 1px 0 #cd4700, -1px -1px 0 #cd4700, 1px -1px 0 #cd4700, 2px 2px 0 #000, 1px 1px 3px #000;
}
#homeHero li.box-slide h1.dark {
	color: #111;
	text-shadow: 1px 1px 3px #fff;
}
#evBatteries ul {
	line-height: 1.5em;
	list-style-type: square;
	margin-top: 2em;
	margin-left: 4em;
}

#payPg main {
	text-align: center;
}
#payPg input {
	font-size: 1.5rem;
}
#payPg input[type^=submit] {
	background-color: #1d3e71;
	border: 0;
	border-radius: .25em;
	color: #fff;
	padding: .5em 1em;
}
#payPg input[type^=submit]:hover {
	background-color: #cd4700;
	text-shadow: 1px 1px 3px #000;
}
#payFrame {
	width: 100%;
	margin: 1rem auto;
	text-align: center;
}


#imgNav {
	background-color: #fff;
}
#imgNav .container {
	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( 33% - 4rem );
}
#imgNav .flex-box h1 {
	border-bottom: 1px solid #fff;
	font-family: Oswald, Montserrat, Lato, "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;
}
#gallery {
	display: flex;
		flex-flow: row;
		align-items: center;
}
#gallery img {
	flex: 0 1 auto;
	margin: 2rem;
	width: 20vw;
	height: auto;
}

#partsBox {
	background-image: url( "../graphics/img_5995.jpg" );
}
#aboutBox {
	background-image: url( "../graphics/img_5601.jpg" );
}
#contactBox {
	background-image: url( "../graphics/austin-distel-gUIJ0YszPig-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;
}
.content h1.pg-title, h1.section-title {
	color: #111;
	font-family: Oswald, Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	padding-top: 1.5rem;
	padding-bottom: 2rem;
	text-transform: uppercase;
}

.light h1.pg-title, .light h1.section-title {
	color: #fff;
	text-shadow: 1px 1px 1px #111;
}

.content aside {
	display: block;
		max-width: 300px;
	float: right;
	margin: 0 0 1rem 1rem;
}
.content aside .sb-box {
	padding: 1rem;
}
.content aside .sb-box h1 {
	font-family: Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-weight: 700;
	margin: -1rem;
	margin-bottom: 1rem;
	padding: 1rem;
}
.content aside .sb-border {
	border: 2px solid #333;
}
.content aside .sb-border h1 {
	background-color: #000;
	color: #fff;
}
.content aside img {
	display: block;
		width: 100%;
		height: auto;
}

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;
	text-decoration: none;
	text-transform: uppercase;
}


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

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


.content main p, #homePg p {
	line-height: 1.5em;
	margin-bottom: 1em;
}
.content main a, #homePg a {
	color: #cd4700;
	text-decoration: none;
}
.content main a:hover, #homePg a:hover {
	color: #ef6122;
	text-decoration: underline;
}
.content main ul {
	margin-bottom: 1rem;
}

#map {
	display: block;
		width: 100%;
		height: 25vw;
}
#map iframe {
	display: block;
		width: 100%;
		height: 100%;
}

#wntyPg main h2 {
	border-bottom: 1px solid #cd4700;
	color: #111;
	font-family: Oswald, Montserrat, Lato, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	margin-bottom: 1rem;
	padding: 1em 0 .5em 0;
	text-transform: uppercase;
}
#wntyPg ul {
	color: #111;
	line-height: 1.5em;
	list-style-type: square;
	margin-left: 3em;
	padding-right: 1em;
}
#wntyPg p, #wntyPg ul, #wntyPg ol, #wntyPg li {
	margin-bottom: 1rem;
}

#assoc {
	display: block;
	text-align: center;
}
ul.assoc li.white-box {
	background-color: #fff;
	border: 3px solid #1d3e71;
	border-radius: .5rem;
}
ul.assoc li.white-box img {
	max-height: calc( 100px - 2rem - 6px );
	margin: 1rem;
}
#svcs {
	padding-bottom: 1rem;
}

#pgFooter {
	font-size: .9rem;
	line-height: 1.5em;
	padding: 1em;
}
#pgFooter .col {
	max-width: calc( 33% - 4rem );
}
#ftrLogo {
	text-align: center;
	margin: 3rem auto;
}
#ftrLogo img {
	display: block;
		max-width: 250px;
		height: auto;
	margin: auto;
}

#ftrSocial ul.social li {
	display: inline-block;
}


ul#sellBtns {
	text-align: center;
}
ul#sellBtns li {
	display: inline-block;
	margin: 0 auto;
}

a.btn {
	text-decoration: none;
}
div.btn, ul.btn li {
	background-color: #cd4700;
	color: #fff;
	font-family: Oswald, "Open Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-weight: 700;
	padding: 1rem;
	text-transform: uppercase;
}
div.btn:hover, ul.btn li:hover {
	background-color: #3b7de3;
	cursor: pointer;
}
div.btn.active, ul.btn li.active {
	background-color: #1d3e71;
	color: #fff;
}
.btn.center {
	display: inline-block;
	margin: auto;
	text-align: center;
}
.small {
	font-size: .9em;
}

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

section.dk-orange {
	background-color: #cd4700;
	color: #111;
	position: relative;
}
section.dk-blue {
	background-color: #1d3e71;
	color: #fff;
	position: relative;
}




@media screen and ( max-width: 1399px ) {
	#social {
		border: 1px solid #ccc;
		border-left: 0;
		box-shadow: 2px 2px 2px rgba( 0,0,0,0.7 );
		padding: 0;
		position: fixed;
			top: calc( 50% - 2rem );
			left: 0;
		z-index: 50;
	}
	#social li {
		display: block;
	}
}

@media screen and ( max-width: 1279px ) {
	section.content, #homePg, #contactPg, #sellPg, #mapPg, #searchPg {
		padding-left: 4rem;
	}
	#menuBtn {
		display: inline-block;
		padding-right: 1rem;
		text-align: right;
	}
	#mainMenu ul {
		background-color: #000;
		display: block;
			width: 100%;
		display: none;
		position: absolute;
			z-index: 150;
	}
	#mainMenu ul li {
		color: #fff;
		display: block;
		padding: .5em;
		padding-left: 2.5em;
		text-align: left;
	}
	#mainMenu ul li:hover {
		background-color: #333;
	}
	#logoBlock {
		order: 1;
	}
	#callBtn {
		order: 2;
	}
	#mainMenu {
		order: 3;
	}
}
@media screen and ( max-width: 999px ) {
	#homeHero {
		height: 40vw;		
	}
	.hero h1, #homeHero li.box-slide h1 {
		font-size: 1.5rem;
	}
	
	.content aside {
		float: none;
		margin: 0 auto;
		padding-bottom: 2rem;
	}
	#imgNav .container, #gallery {
		display: block;
		margin: auto;
		text-align: center;
	}
	#imgNav .flex-box, #gallery img {
		display: block;
			width: 50%;
		flex: none;
		margin: 1rem auto;
	}
	#gallery img {
		height: auto;
	}
	#map {
		height: 33vw;
	}
	.reviews, #pgFooter .container {
		display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: flex-start;
	}
	.reviews .review {
		border: 3px double #8fc040;
		display: block;
			flex: 1 0 auto;
			width: calc( 50% );
		margin: 2rem auto;
		padding: 2rem;
	}
	#pgFooter .col {
		margin: 0 auto;
		max-width: 100%;
		padding: 1rem;
	}
	
}
@media screen and (max-width: 799px) {
	#contact {
		flex: 1 0 100%;
			order: 3;
		max-width: 100%;
		margin: 0 auto;
		padding-bottom: 1rem;
	}
	#imgNav .flex-box {
			width: 80%;
	}
	#logo {
		max-width: 25vw;
	}
}