/*
	Website Name: Hall's Garage, 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: 1399px ) {
	#mainMenu {
		text-align: right;
	}
	#menuBtn {
		display: inline-block;
		padding-right: 1rem;
	}
	#mainMenu ul {
		background-color: #900;
		display: block;
			width: 100%;
		display: none;
		position: absolute;
			z-index: 550;
        margin-top: 2.5em;
	}
	#mainMenu ul li.parent ul#docsMenu.submenu, #mainMenu ul li#docsParent ul {
		display: block;
		margin: 0;
		position: relative;
	}
	#mainMenu ul li#docsParent {
		margin: 0;
		padding: 0;
	}
	#docsParent span.parent {
		display: none;
	}
	#mainMenu ul li.parent ul#docsMenu {
		box-shadow: none;
	}
	
	#mainMenu ul li, #mainMenu ul ul#docsMenu li {
		color: #fff;
		display: block;
		padding: .5em;
		padding-left: 2.5em;
		text-align: right;
	}
	#mainMenu ul li:hover, #mainMenu ul ul#docsMenu li:hover {
		background-color: #ff0;
		color: #000;
	}
	.content aside {
		float: none;
		margin: 0 auto;
		padding-bottom: 2rem;
	}
	#mainMenu .desktop, .content .desktop {
		display: none;
	}
	#mainMenu .mobile {
		display: block;
	}
	.content .mobile {
		display: inline;
	}
}
@media screen and ( max-width: 1199px ) {
    #iconNav {
        display: none;
    }
    #imgNav, .affiliations .flex-parent-row {
        flex-flow: column wrap;
    }
    #imgNav .flex-box {
        padding: 1rem 1rem 1rem 3rem;
        width: calc( 100vw - 5rem );
    }
    .affiliations .flex-child-col, #svcs, #assoc {
        margin: 2rem auto;
        text-align: center;
    }
    #homePg {
        padding-left: 3rem;
    }
	#pgHeader {
		background-size: cover;
		background-position: bottom;
		background-attachment: scroll;
		position: relative;
		z-index: 150;
	}
	#menuBtn {
		margin-right: .5rem;
	}
	#mainMenu ul.nav {
		background-color: #24368e;
		/* box-shadow: -3px 3px 3px rgba( 0,0,0,0.7 ); */
		color: #fff;
		min-width: 20ch;
		margin-right: 1rem;
		padding-right: 1rem;
	}
	#mainMenu ul.nav li.desktop {
		display: none;
	}
	#mainMenu ul.nav li.mobile {
		display: block;
	}
	#mainMenu ul.nav li:hover {
		background-color: #444;
	}
	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 {
		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%;
	}
	#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 {
        background-color: #fff;
    }
	#imgNav .flex-box {
		width: calc( 100vw - 5rem );
		height: 33vw;
        margin: 1rem;
	}
    #imgNav .flex-box h1 {
        font-size: 2rem;
    }
    #imgNav .flex-box p {
        font-size: 1.5rem;
    }
    #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 ) {
	#logoBlock {
		height: calc( 40vw );
	}
	#logo img, #logoTruck img {
		height: 30vw;
	}
	#logo img {
		left: calc( 50% );
	}
	#logoTruck img, #hdrWrap.sticky-menu #logoTruck img {
		left: calc( 50% - 15vw );
	}
	#highline {
		flex-flow: column nowrap;
		line-height: 1.5em;
		text-align: center;
	}
	#iconNav {
		display: none;	
	}
	#hero.home {
		min-height: 60vw;
	}
	#hero .image-credit {
		bottom: 1rem;
		right: 1rem;
	}
	#pgFooter .left, #pgFooter .right {
		float: none;
		line-height: 2em;
		margin: auto;
		text-align: center;
	}
	#pgFooter .block {
		display: block;
	}
	#pgFooter .divider {
		display: none;
	}
}