/**
 * Responsive CSS used for EBPs site layouts...base design is for mobile and is adjusted for larger screen sizes
 *
 * @author     Jeremy Conley
 */

@media (min-width: 576px){
	.homepage_hero_banner_mobile {
		height: 350px;
	}
}

@media (min-width: 768px){
	.mobile_menu_label, .mobile_menu_checkbox_trigger {
		display: none;
	}
	
	header.page_header nav > ul {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	header.page_header nav ul li {
		flex: 1 1 auto;
	}
	
	header.page_header nav a {
		padding: 0.75rem 0.5rem;
	}
	
	.homepage_hero_banner_container {
		background: #000;
	}
	
	.homepage_hero_banner_mobile {
		display: none;
	}
	
	.homepage_hero_content_container {
		display: flex;
		flex-direction: column;
		align-items: end;
		justify-content: center;
		min-height: 45rem;
	}
	
	.homepage_hero_banner_container h1 {
		font-size: 2.5rem;
	}
	
	.homepage_hero_content_overlay {
		background-color: rgba(0, 0, 0, 0.3);
		padding: 2rem;
		max-width: 50%;
	}
}

@media (min-width: 992px){
	.homepage_hero_content_background {
		width: 45%;
	}
}