/*
	Website Name: CUST_NAME, Custom Website
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 16 Apr 2025
*/

/* Styling for responsive pages */
.container {
	max-width: 95%;
}

@media screen and ( max-width: 1199px ) {
	#pgHeader {
		background-size: cover;
		background-position: bottom;
		background-attachment: scroll;
		position: relative;
		z-index: 150;
	}
	#menuBtn {
		margin-right: .5rem;
	}
    #menuBtn span.hamburger {
        background-color: #fff;
    }
    #menuBtn span.hamburger:hover {
        background-color: #00ab4f;
    }
	#mainMenu ul.nav {
		background-color: #00ab4f;
		/* box-shadow: -3px 3px 3px rgba( 0,0,0,0.7 ); */
		color: #fff;
		min-width: 20ch;
		padding-right: 1rem;
	}
	#mainMenu ul.nav li.desktop {
		display: none;
	}
	#mainMenu ul.nav li.mobile {
		display: block;
	}
	#mainMenu ul.nav li:hover {
		background-color: #a2cf58;
        color: #fff;
	}
	section.content, section.home {
		padding: 0 1rem 0 2rem;
	}
    #highline, #mainHdr, #pgFooter {
		flex-flow: column wrap;
	}
	#highline .col, #mainHdr .col {
		width: auto;
		margin: .5em auto;
		text-align: center;
	}
	#slogan {
		order: 2;
	}
	#phones {
		order: 3;
	}
	#menuBtn {
		display: inline-block;
	}
	#mainMenu ul {
		background-color: #00ab4f;
		display: block;
			width: 100%;
		display: none;
		position: absolute;
			z-index: 100;
		text-align: left;
	}
	#mainMenu ul li {
		color: #fff;
		display: block;
		padding: 1em;
	}
	#mainMenu ul li:hover {
		background-color: #a2cf58;
        color: #000;
	}
	#mainMenu ul li.parent {
		display: none;
	}
	#mainMenu .label {
		display: none;
	}
	#mainMenu .mobile {
		display: block;
	}
	#marqueeLeft, #marqueeRight {
		display: block;
			width: auto;
		margin: auto;
		padding: 0;
	}
	#marqueeRight {
		background-color: #eee;
		padding: 2rem;
	}
	#homeMain {
		background-color: #fff;
		padding: 0;
	}
	#homeMain .container {
		flex-flow: column wrap; 
		text-align: center;
	}
	#homeMain iframe.search-box, #homeMain .contact-box {
		border-radius: 0;
		width: 100%;
		margin: 1em auto;
		padding: 1rem;
	}
	#homeMain iframe.search-box {
		display: none;
	}
	#searchBtn {
		display: inline-block;
		font-size: 2.5rem;
		margin: 2rem auto;
	}
	#locationBtn {
		border-radius: 0;
		width: 90%;  /* Fallback for Safari */
		width: calc( 100% - 2rem );
		
	}
    #ftrHours {
        padding: 2rem 0;
        order: 2;
    }
}
@media screen and ( max-width: 1099px ) {
    #aboutPg #content main, #aboutPg #content aside {
        display: block;
        margin: auto;
        max-width: 100%;
    }
    
}
@media screen and ( max-width: 999px ) {
	#highline.flex-parent-row, section .container.flex-parent-row, #pgFooter .flex-parent-row, #aboutPg #content main.flex-child-col, #aboutPg #content aside.flex-child-col {
		flex-wrap: wrap;
		flex-direction: column;
	}
	#pgHeader .slogan {
		font-size: 3rem;
	}
	#hero.home {
		height: 30vh;
	}
	#hero.contact {
		background-attachment: scroll;
		background-position: center center;
		height: 30vh;
	}
	#hero.home h1 {
		font-size: 2rem;
	}
	section.home aside.flex-child-col {
		order: 0;
		width: auto;
		max-width: 340px;
		margin: auto;
	}
	section.home main.flex-child-col {
		order: 1;
		width: auto;
		max-width: 100%;
	}
    
	#map {
		height: 50vh;
	}
	#hlAddr, #hlContact, #ftrBiz, #ftrDMV, #ftrContact {
		margin: .5rem auto;
		text-align: center;
	}
	#imgNav {
		padding: 1rem;
	}
	#imgNav .flex-box {
		width: calc( 100vw - 5rem );
		height: 33vw;
		margin: 0 1rem 1rem;
	}
	#imgNav .desktop, #reviewBox { display: none ; }
	#imgNav .mobile { display: flex; }
	#pgFooter .block {
		display: block;
		padding: .25em;
	}
	#pgFooter .divider {
		display: none;
	}
}
@media screen and (max-width: 699px) {
	#hoursBlock {
		max-width: 75%;
	}
	ul.pymt .cc {
		background-size: auto 100%;
		border-radius: 3px;
		font-size: 10px;
	}
	footer .block {
		display: block;
		margin: .25em auto;
	}
	footer .divider {
		display: none;
	}
}