.banner{ background-image:url(banner-mob.jpg);  background-repeat:no-repeat;     background-position: top left;    background-size: auto;    height: 400px; }
.banner:after{ content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background-color:rgba(0,0,0,0.55);}
.banner .banner-title{ height:100%; z-index:10; }
.banner h1{ font-weight:normal; margin:0; font-family: 'ClearSansLight'; color:#fff; text-align:center; font-size:24px; padding:0 20px; line-height:1.3em; text-transform:uppercase }
.banner h1 span{ display:block}

.banner-content-wrapper{ height:100%; display: -webkit-flex;	display: flex; -webkit-justify-content:center;  justify-content:center; -webkit-align-items:center; align-items:center; position:relative; z-index:10}

.banner .button-wrap{ padding-top:40px;}

@media only screen and (min-width: 480px) {
	.banner h1{ font-size:28px;}
}


@media only screen and (min-width: 600px) {


.banner{ background-image:url(banner.jpg); height:300px;  background-position: center;    background-size: cover; }
.banner h1{ width:500px; margin:auto}
}

@media only screen and (min-width: 768px) {

.banner{height:350px;}
.banner h1{font-size:34px;}
}

@media only screen and (min-width: 1024px) {


}


@media only screen and (min-width: 1240px) {

.banner{height:400px;}
.banner h1{font-size:42px; width:800px}

}