/* =========================================================
   Unified Page Banner Class
   ========================================================= */

@keyframes fadeInBanner {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-banner {
	width: 100%;
	min-height: 250px;
	display: flex;
	align-items: center;
	padding: 60px 20px;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: inset 0 10px 12px -10px rgba(0, 0, 0, 0.1);

	background-position: right center;
	background-size: cover;
	background-repeat: no-repeat;
}

.page-banner.gallery-bg {
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('../webpagedesignimages/gallerybanner.png');
}
.page-banner.contact-bg {
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('../webpagedesignimages/contactbanner.png');
}
.page-banner.past-clients-bg {
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('../webpagedesignimages/pastclientsbanner.png');
}
.page-banner.testimonials-bg {
	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('../webpagedesignimages/testimonialsbanner.png');
}

.banner-container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	animation: fadeInBanner 1s ease forwards;
}

.banner-content {
    animation: fadeInBanner 1s ease forwards;
}

.page-banner h1 {
	/* Was 'Gill Sans Bold', which most visitors do not have, so the heading looked
	   different on every device. Montserrat is already loaded on every page. */
	font-family: 'Montserrat', sans-serif;
	font-size: 48px;
	font-weight: 800;
	color: #4f4d4d;
	text-shadow: 0 6px 3px rgba(0, 0, 0, 0.15);
	margin: 0 0 0 40px;
}

/* ---------------------------------------------------------
   Unified Responsive Breakpoints
   --------------------------------------------------------- */

@media (max-width: 1024px) {
	.page-banner h1 {
		margin-left: 0;
		font-size: 38px;
	}
}

@media (max-width: 768px) {
	.page-banner {
		min-height: 180px;
		padding: 40px 20px;
		background-size: cover !important;
	}
	.page-banner h1 {
		font-size: 30px;
		text-align: left;
		margin-left: 0px;
	}
}