
.slide-inn {text-align: left;display:table-cell; vertical-align:middle;}
.slide-inn h1 {  font-size:45px; line-height:45px; color:#fff; }
.slide-inn h1 span {color:#fff;}
.slide-inn2 h1 { color:#f1592a;}
.slide-inn .btn { margin:30px 0 0;}
.slide-inn .btn a { color:#fff; background:#f1592a url('../images/phone-icon2.png'); background-repeat:no-repeat; background-position:top 12px left 20px; border-radius:22px;  font-size:26px; padding:6px 25px 6px 55px; font-weight:normal;}
.slide-inn .btn2 a {color:#fff; background:#009ace url('../images/phone-icon.png'); background-repeat:no-repeat; background-position:top 12px left 20px; border-radius:22px;  font-size:26px; padding:6px 25px 6px 55px; font-weight:normal;} 

#heating-banner .wrapper,
#plumbing-banner .wrapper,
#worcester-accredited-banner .wrapper,
#testimonials-banner .wrapper,
#contactus-banner .wrapper,#worcester1000-banner .wrapper { display: table; height:280px;}

#heating-banner,
#plumbing-banner,
#worcester-accredited-banner,
#testimonials-banner,
#contactus-banner,#worcester1000-banner { float:left; width:100%; position:relative; height:280px;}

#heating-banner { 
background:
url('../images/heating-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 55%; 
background-size:cover;}


#plumbing-banner { 
background:
url('../images/plumbing-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 58%; 
background-size:cover;}

#worcester-accredited-banner { 
background:
url('../images/worcester-accredited-banner.jpg'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 54%; 
background-size:cover;}

#testimonials-banner { 
background:
url('../images/testimonials-banner.jpg'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 44%; 
background-size:cover;}

#contactus-banner { 
background:
url('../images/contactus-banner.jpg'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 52%; 
background-size:cover;}

#worcester1000-banner { 
background:
url('../images/worcester1000-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 55%; 
background-size:cover;}

@media only screen and ( max-width:1800px) {
.slide-inn h1 { font-size:50px; line-height:60px;}
}

@media only screen and ( max-width:1640px) {
#heating-banner {background-position:left 40% bottom 50%;}
#plumbing-banner {background-position:left 40% bottom 50%;}
#worcester-accredited-banner {background-position:left 40% bottom 50%;}	
#testimonials-banner {background-position:left 40% bottom 50%;}	
#contactus-banner {background-position:left 40% bottom 50%;}
}

@media only screen and ( max-width:1440px) {
.slide-inn h1 { font-size:35px; line-height:40px; padding:0px;}
}

@media only screen and ( max-width:1170px) {
.slide-inn h1 br { display:none;}
.slide-inn { text-align:center;}
.slide-inn h1 { font-size:35px; line-height:40px; text-align:center; color:#fff;}
.slide-inn p { color:#fff;}

#heating-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/heating-banner.png'); 
background-repeat:no-repeat; 
background-position:top 0 right 0%,left 40% bottom 50%; 
background-size:100% 100%,cover;}

#plumbing-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/plumbing-banner.png'); 
background-repeat:no-repeat,no-repeat; 
background-position:top 0 right 0,left 20% bottom 45%; 
background-size:100% 100%,cover;}

#worcester-accredited-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/worcester-accredited-banner.jpg'); 
background-repeat:no-repeat,no-repeat; 
background-position:top 0 right 0,left 40% bottom 50%;
background-size:100% 100%,cover;}

#testimonials-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/testimonials-banner.jpg'); 
background-repeat:no-repeat,no-repeat; 
background-position:top 0 right 0,left 40% bottom 50%;
background-size:100% 100%,cover;}

#contactus-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/contactus-banner.jpg'); 
background-repeat:no-repeat,no-repeat; 
background-position:top 0 right 0,left 20% bottom 25%;
background-size:100% 100%,cover;}
}

@media only screen and ( max-width:980px) {
#heating-banner .wrapper,
#plumbing-banner .wrapper,
#worcester-accredited-banner .wrapper,
#testimonials-banner .wrapper,
#contactus-banner .wrapper,
.slide-inn { height:200px;}

#heating-banner,
#plumbing-banner,
#worcester-accredited-banner,
#testimonials-banner,
#contactus-banner  {float:left; width:100%; position:relative; height:200px;}

.slide-inn .btn { margin:20px 0;}
.slide-inn .btn a {background-position: top 8px left 15px;font-size: 22px;padding: 6px 18px 6px 50px;}

}

@media only screen and ( max-width:767px) {
.slide-inn h1 { font-size:25px; line-height:30px;}
}

@media only screen and ( max-width:640px) {
.slide-inn h1 { font-size:26px; line-height:35px;}

#heating-banner { background-size:100% 100%,130% auto;background-position: top 0 right 0%,left 100% bottom 50%;}
#plumbing-banner,#contactus-banner { background-size:100% 100%,130% auto;background-position: top 0 right 0%,left 100% bottom 50%;}

}

@media only screen and ( max-width:520px) {
#heating-banner,
#plumbing-banner,
#worcester-accredited-banner,
#testimonials-banner,
#contactus-banner { background-size:100% 100%,100% auto;}

#heating-banner,#plumbing-banner { background-size:100% 100%,160% auto;}
#worcester-accredited-banner,#testimonials-banner,#contactus-banner {background-size:100% 100%,200% auto; background-position: top 0 right 0%,left 100% bottom 50%;}

.slide-inn h1 { font-size:22px; line-height:25px;}
.slide-inn .btn a { background-position: top 8px left 10px; font-size: 20px; padding: 6px 13px 6px 40px;background-size: 23px 23px;}
.slide-inn .btn2 a { background-position: top 8px left 10px; font-size: 20px; padding: 6px 13px 6px 40px;background-size: 23px 23px;}
}

@media only screen and ( max-width:420px) {
#heating-banner,#plumbing-banner { background-size:100% 100%,210% auto;}
}








