

/* HEADER */
header { margin: 20px 0 0 0;}
#site_strapline { display: flex; justify-content: flex-end; align-items: center; }

#site_strapline span { font-weight: 400; margin: 0; color: var(--primary); width: 350px; text-align: right; font-size: 14pt; margin-right: 90px; } 
#site_strapline-mobile span {  /* see below */ } 

#logo { max-width: 100%; }
#logo img { max-width: 100%;  }
#logo-ground { display: none; }
#site_strapline-mobile { display: none; }

#header-banner { height: 400px; max-height: 400px; }
#header-banner img { object-position: top center; }

#header-mid-lower img.banner-quotemarks { width: 360px; }

#header-mid-higher { background-color: var(--primary); height: 60px; margin-top: -1px; }

/* HEADER - MEDIA QUERIES */
@media (max-width: 768px) {
#logo { margin: 20px -15px 0px -15px; }

#logo-ground { display: block; background-color: var(--primary); height: 60px; margin: -1px -15px 0 -15px; }
#site_strapline { display: none; } 
#header-mid-higher { display: none; }
#site_strapline-mobile  { display: block; }
#site_strapline-mobile span { font-weight: 400; padding: 15px 15px; margin: 0px; display: block; text-align: center; color: var(--primary); font-size: 14pt; }

}

@media (max-width: 768px) {
	#header-banner img { object-position: 60%; }
}




/* Content */
h1 { color: var(--primary); font-weight: 400; }
h4 { text-transform: uppercase; font-size: 14pt; color: var(--primary-darker); font-weight: 700; margin: 1.5em 0 0.5em 0; }

p { font-size: 14pt; color: var(--bs-gray-800); }

a, a:hover { color: var(--primary-darker); text-decoration: none; }
a:hover { color: var(--primary-dark); }
main p.cta { font-size: 22pt; color: var(--primary);  }

ul {}
li { color: var(--primary); font-size: 14pt; }
li span { color: var(--bs-gray-800); }







#maria-wybrow { float: right; width: 420px; margin: 0 0 0 30px; }
#maria-wybrow img { width: 100%; max-width: 100%; }

@media (max-width: 1200px) {
	#maria-wybrow  { width: 400px; }
}

@media (max-width: 992px) {
	#maria-wybrow  { width: 320px; }
	
}
@media (max-width: 768px) {
	h1 { font-size: 27pt; }
	#maria-wybrow  { width: 250px; }
}

@media (max-width: 576px) {
	h1 { font-size: 26pt; }
	#maria-wybrow  { width: 220px; }
}

@media (max-width: 500px) {
	h1 { font-size: 27pt; text-align: center;  margin: 20px 0 20px 0; } 
	#header-mid-lower img.banner-quotemarks { width: 300px; } 
	#maria-wybrow  { float: none; width: 80%; margin: 0 auto 30px auto; }
	main p.cta {} 
}




/* Testimonial */
#testimonial { margin: 40px 0 0 0; padding: 40px; background-color: var(--primary-darker); color: var(--bs-white); height: 340px; }
#testimonial .container { position: relative; height: 100%; }
#testimonial p { color: var(--bs-white); font-size: 20pt; font-style: italic; }
#testimonial .testimonial-quotemarks { position: absolute; bottom: -20px; right: 20px; width: 160px; }

@media (max-width: 768px) {
	#testimonial { height: 420px; } 
	#testimonial p { font-size: 19pt; }
}

@media (max-width: 576px) { 
	#testimonial { height: 500px; font-size: 27pt; text-align: center;  margin: 20px 0 20px 0; } 
	#testimonial p { font-size: 18pt; }
}






/* FOOTER */
footer { background-color: var(--primary); }
footer .footer-logo { width: 220px; height: autol; }
footer .footer-dbs { margin: 20px 0 0 0; text-transform: uppercase; font-weight: 700; color: var(--white); }
footer .footer-assessment { color: var(--white); }
footer .footer-copyright { margin: 40px 0 0 0; color: var(--white); }


/* xs */
@media (max-width: 576px) { 
footer .col-sm-6 { text-align: center !important; }

}