#boiler-installations-banner,#boiler-service-banner,#central-heating-banner,#plumbing-banner,#bathrooms-banner,#worcester-banner,#contactus-banner {float: left; width:100%; position:relative; height:300px;}

#boiler-installations-banner .wrapper,#boiler-service-banner .wrapper,#central-heating-banner .wrapper,#plumbing-banner .wrapper,
#bathrooms-banner .wrapper,#worcester-banner .wrapper,#contactus-banner .wrapper { display:table;}


#boiler-installations-banner { background:url('../images/boiler-installations-banner.png');background-repeat:no-repeat;background-position: left 0 bottom 55%; background-size:cover;}
#boiler-service-banner {background:url('../images/boiler-service-banner.png');background-repeat:no-repeat; background-position:left 0 bottom 60%; background-size:cover;}
#central-heating-banner {background:url('../images/central-heating-banner.png');background-repeat:no-repeat; background-position:left 0 bottom 40%; background-size:cover;}
#plumbing-banner {background:url('../images/plumbing-banner.png');background-repeat:no-repeat; background-position:left 0 bottom 20%; background-size:cover;}
#bathrooms-banner {background:url('../images/bathrooms-banner.png');background-repeat:no-repeat; background-position:left 0 bottom 30%; background-size:cover;}
#worcester-banner {background:url('../images/worcester-banner.png');background-repeat:no-repeat; background-position:left 0 bottom 60%; background-size:cover;}
#contactus-banner {background:url('../images/contactus-banner.png');background-repeat:no-repeat; background-position:left 0 bottom 30%; background-size:cover;}

#boiler-installations-banner .banner-text { text-align: left;}


.banner-text { text-align: right; display: table-cell; height:300px; vertical-align:middle;}
.banner-text h1 { color:#00aeef; font-size:40px; line-height:50px;font-weight:normal; margin:0px; padding:0; font-family:'Montserrat Bold'; font-style:italic;}
.banner-text .btn { float:left; width:100%; margin:3% 0 0;}
.banner-text .btn a {background:#00aeef; color:#fff; border-radius:26px; padding:15px 30px; font-size:18px;}
.banner-text .btn a:hover  {background:#333;}


@media only screen and ( max-width:1640px) {

}

@media only screen and ( max-width:1300px) {

}

@media only screen and ( max-width:1170px) {
.banner-text h1 { font-size:35px; line-height:40px;}
}

@media only screen and ( max-width:980px) {
.banner-text h1 { font-size:36px; line-height:40px;}
}

@media only screen and ( max-width:768px) {
.banner-text{ height:300px;}
.banner-text { text-align:center;}
.banner-text h1 { color:#fff;font-size:26px;line-height:35px;}
.banner-text h1 br { display:none;}	
.banner-text .btn a { padding:12px 25px; font-size:17px;}

#boiler-installations-banner .banner-text { text-align:left;}

#boiler-installations-banner { background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../images/boiler-installations-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,right 0% bottom 0%;
background-size:100% 100%,cover;}

#boiler-service-banner  { background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../images/boiler-service-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,left 40% bottom 100%;
background-size:100% 100%,cover;}

#central-heating-banner { background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../images/central-heating-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,left 0% bottom 100%;
background-size:100% 100%,cover;}

#plumbing-banner { background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../images/plumbing-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,left 0% bottom 100%;
background-size:100% 100%,cover;}

#bathrooms-banner { background:
linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),
url('../images/bathrooms-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,right 0% bottom 100%;
background-size:100% 100%,cover;}

#worcester-banner { background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../images/worcester-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,left 0% bottom 90%;
background-size:100% 100%,cover;}

#contactus-banner { background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../images/contactus-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:left 0 bottom 0,left 0% bottom 100%;
background-size:100% 100%,cover;}


}

@media only screen and ( max-width:640px) {
#boiler-installations-banner,#boiler-service-banner,#central-heating-banner,#plumbing-banner,#bathrooms-banner,#worcester-banner,#contactus-banner,.banner-text{ height:250px;}

.banner-text h1 { font-size:26px; line-height:35px;}
.banner-text .btn { margin:3% 0 0;}
.banner-text .btn a { padding:9px 20px; font-size:15px;}
}

@media only screen and ( max-width:520px) {
#boiler-installations-banner,#boiler-service-banner,#central-heating-banner,#plumbing-banner,#bathrooms-banner,#worcester-banner,#contactus-banner,.banner-text{ height:220px;}

#boiler-installations-banner .banner-text { text-align:center;}
.banner-text .btn { margin:4% 0 0;}
}

@media only screen and ( max-width:420px) {
#boiler-installations-banner,#boiler-service-banner,#central-heating-banner,#plumbing-banner,#bathrooms-banner,#worcester-banner,#contactus-banner,.banner-text{ height:200px;}
.banner-text h1 { font-size:22px; line-height:30px;}
}