/*
	Website Name: Porchtown Recycling, Custom Website
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 6 Dec 2024
*/

/* Styling for responsive pages */
.container {
	max-width: 95%;
}
#slides a.btn.desktop {
	display: inherit;
}
#slides a.btn.mobile {
	display: none;
}

@media screen and ( max-width: 1199px ) {
	#mainMenu ul.nav {
		background-color: #fff;
		box-shadow: -3px 3px 3px rgba( 0,0,0,0.7 );
		color: #000;
		min-width: 20ch;
	}
	#mainMenu ul.nav li.desktop {
		display: none;
	}
	#mainMenu ul.nav li.mobile {
		display: block;
	}
	section.content, section.home {
		padding: 0 1rem 0 2rem;
	}
}
@media screen and ( max-width: 999px ) {
	#highline.flex-parent-row, section.container .flex-parent-row {
		flex-wrap: wrap;
		flex-direction: column;
	}
	#pgFooter {
		line-height: 1.5em;
	}
	#hero.home {
		background-attachment: scroll;
		background-position: center center;
	}
	#hero.home h1 {
		font-size: 2rem;
	}
	#slides figure img {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}
	#slides a.btn.desktop {
		display: none;
	}
	#slides a.btn.mobile {
		display: inherit;
	}
	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: calc( 100% - 3rem );
		padding-right: 1rem;
	}
	#hlAddr, #hlContact, #ftrBiz, #ftrDMV, #ftrContact {
		margin: .5rem auto;
		text-align: center;
	}
	#blockNav .flex-box {
		width: calc( 100vw - 2rem );
		margin: .5rem 0;
	}
	#social {
		color: transparent;
		position: fixed;
			top: calc( 50% - 4rem );	/* The vertical offset should be the number of icons to be shown times 2; e.g. FB, Instagram, and eBay icons showing should be ( 50% - 6rem ); */
			left: 0;
		z-index: 503;
	}
	#social ul.social li {
		display: block;
	}
	#social p {
		display: none;
	}
	#social li.fb { background-position: 0 -2em; }
	#social li.fb:hover { background-position: 0 -1em; }
	#social li.ig { background-position: -11em -2em; }
	#social li.ig:hover { background-position: -11em -1em; }
}
@media screen and (max-width: 899px) {
	#pgFooter .block {
		display: block;
	}
	#pgFooter .divider {
		display: none;
	}
}
@media screen and (max-width: 599px) {
	#pgFooter .flex-parent-row {
		flex-wrap: wrap;
		flex-direction: column;
	}
}