/*
	Website Name: OZ Auto Parts Inc, Custom Website
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 9 Feb 2026
*/

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

@media screen and ( max-width: 1199px ) {
    #hero {
		background-attachment: scroll;
	}
	#hero.home, #hero.scrap, #hero.dumpster, #hero.forms, #hero.about, .map {
		min-height: 35vw;
	}
	#highline {
		flex-flow: column nowrap;
		line-height: 1.5em;
		text-align: center;
	}
	#highline .col {
		padding: .25em;
	}
	#logo {
		max-width: 250px;
	}
	#contactBlock address {
		font-size: 1.5rem;
	}
	#contactBlock .contacts {
		font-size: 1rem;
	}
	
    #navCheck {
        margin-right: 1.5rem;
    }
	#mainMenu {
		text-align: right;
	}

	#menuBtn {
		display: inline-block;
		padding-right: 1rem;
	}
	#mainMenu ul {
		background-color: #000;
		display: none;
			width: 33vw;
		position: absolute;
			z-index: 100;
			right: 0;
	}
	#mainMenu ul li {
		color: #fff;
		display: block;
		padding: .5rem 1rem;
		text-align: right;
	}
	#mainMenu .desktop {
		display: none;
	}
	#mainMenu .mobile {
		display: block;
	}
	
	#social {
		position: fixed;
			top: calc( 50% - 4rem );
			left: -.5rem;
		z-index: 50;
		margin-left: 0;
	}
	#social ul, #social ul li {
		display: block;
	}
	#social ul.social {
		font-size: 2rem;
	}
	#social ul.social span.desktop {
		display: none;
	}
	ul.social .fb:hover { background-position: 0 -1em; }
	ul.social .eb:hover { background-position: -5em -1em; }
	
	
	#imgNav .container {
		display: block;
	}
	#imgNav .flex-box {
		display: block;
			width: 50%;
		flex: none;
	}
	#searchBox, #partsBox.flex-box {
		display: none;
	}
    #locNav .flex-parent-row, #iconNav .flex-parent-row {
        flex-wrap: wrap;
		flex-direction: column;
    }
    #locNav .flex-box, #iconNav .flex-box {
        width: 50%;
    }
    
	#mobileSearch, #partsBoxMobile {
		display: block;
	}
	#homeInfo.content main, #homeInfo.content aside {
		display: block;
		margin: auto;
	}
	#homeInfo.content main {
		width: auto;
		max-width: 65ch;
	}
	
	#scrapBuy h1.callout {
		font-size: 2rem;
	}
	#pgHeader {
		background-size: cover;
		background-position: bottom;
		background-attachment: scroll;
		position: relative;
		z-index: 150;
	}
	#menuBtn {
		margin-right: .5rem;
	}
	#mainMenu ul.nav {
		color: #fff;
		min-width: 20ch;
	}
    #mainMenu ul.nav li {
        display: block;
    }
	#mainMenu ul.nav li.desktop {
		display: none;
	}
	#mainMenu ul.nav li.mobile {
		display: block;
	}
	#mainMenu ul.nav li:hover {
		background-color: #900;
	}
	section.content, section.home {
		padding: 0 1rem 0 2rem;
	}
}
@media screen and ( max-width: 999px ) {
	#highline.flex-parent-row, section .container.flex-parent-row, #pgFooter .flex-parent-row, #hero.home .hero-left, .location .flex-parent-row {
		flex-wrap: wrap;
		flex-direction: column;
	}
	#pgHeader .slogan {
		font-size: 3rem;
	}
    #hero.home .hero-right {
        display: none;
    }
	#hero.contact {
		background-attachment: scroll;
		background-position: center center;
		height: 30vh;
	}
	#hero.home h1 {
		font-size: 2rem;
	}
    #hero div.btn.desktop {
        display: none;
    }
    #hero div.btn.mobile {
        display: inline-block;
    }
    
	section.home aside.flex-child-col {
		order: 0;
		width: auto;
		max-width: 340px;
		margin: auto;
	}
	section.home main.flex-child-col, #hero.home .hero-left {
		order: 1;
		width: auto;
		max-width: 100%;
	}
	#about main, #about aside {
		margin: 1rem auto;
		width: auto;
	}
	#about main {
		max-width: 65ch;
	}
	.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; }
    
    .location .flex-child-col, .location .flex-child-col.three-even-col {
        width: 65ch;
        max-width: 95%;
        margin: 1rem auto;
        text-align: center;
    }
    
	#pgFooter .block {
		display: block;
		padding: .25em;
	}
	#pgFooter .divider {
		display: none;
	}
}
@media screen and (max-width: 849px) {
	#mainMenu ul {
		width: 50vw;
	}
	
	#imgNav .flex-box {
		width: 90%;
	}
	
	#scrapBuy h1.callout {
		font-size: 1rem;
	}
	
	.cForm .detailSection {
		border: 0;
		box-shadow: none;
		display: block;
			max-width: 100%;
		margin: 1rem auto;
		padding: 0;
		text-align: left;
	}
	#mobileSearch ul li {
		display: block;
	}
	#pgFooter .left, #pgFooter .right {
		float: none;
		line-height: 2em;
		margin: auto;
		text-align: center;
	}
	#pgFooter .block {
		display: block;
	}
	#pgFooter .divider {
		display: none;
	}
}
@media screen and (max-width: 849px) {
    #locNav .flex-box, #iconNav .flex-box {
		width: calc( 95vw - 5rem );
    }
}