.LargeBannerWithTextOver {display:block; position:relative; margin-bottom: 2.5em; background-size: cover; background-position: 30% 50% ; height: 300px;}
.LargeBannerWithTextOver .TextOverlay{position:absolute; left: 0; top: 0; bottom: 0; z-index: 100; padding: 2em; color: #fff; width: 40%;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 4rem; line-height: 3.8rem; font-weight:bold; margin-bottom: .4em;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.6rem; line-height: 1.8rem; font-weight:bold;}







@media only screen and (max-width: 967px) {
.LargeBannerWithTextOver {height: 228px;}
.LargeBannerWithTextOver .TextOverlay{padding: 1.5em; width: 40%;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 2.8rem; line-height: 2.8rem; margin-bottom: .3em;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.2rem; line-height: 1.4rem;}  
}

@media screen and (max-width: 767px) {
.LargeBannerWithTextOver {height: 280px; position:relative;background-size: cover; background-position: 100% 50%;}
.LargeBannerWithTextOver .TextOverlay{background: transparent url("/siteelements/images/base/internal/bg-textoverlay-blue5.png") repeat; position:absolute; left: 0; top: auto; right: auto;bottom: 0; width: auto; padding: 12px;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 2rem; line-height: 2rem;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.2rem; line-height: 1.4rem;}