.slide-inn {text-align: right;display:table-cell; vertical-align:middle;}
.slide-inn h1 {  font-size:45px; line-height:45px; color:#0470ba; }
.slide-inn h1 span {color:#fff;}
.slide-inn .btn { margin:30px 0 0;}
.slide-inn .btn a { color:#fff; background:#ed1c24 url('../images/arrow-icon.png'); background-repeat:no-repeat; background-position:top 13px right 15px; border-radius:22px;  font-size:23px; padding:6px 40px 6px 25px; font-weight:normal;}
.slide-inn .btn a:hover { color:#fff; background:#d21a21 url('../images/arrow-icon-hover.png'); background-repeat:no-repeat; background-position:top 13px right 15px; border-radius:22px;  font-size:23px; padding:6px 40px 6px 25px; font-weight:normal;}

#heating-banner .wrapper,
#finance-banner .wrapper,
#worcester-banner .wrapper,
#testimonials-banner .wrapper,
#contactus-banner .wrapper { display: table; height:280px;}

#heating-banner,
#finance-banner,
#worcester-banner,
#testimonials-banner,
#contactus-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:100% auto;}


#finance-banner { 
background:
url('../images/finance-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 58%; 
background-size:100% auto;}

#worcester-banner { 
background:
url('../images/worcester-banner.jpg'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 54%; 
background-size:100% auto;}

#testimonials-banner { 
background:
url('../images/testimonials-banner.jpg'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 44%; 
background-size:100% auto;}

#contactus-banner { 
background:
url('../images/contactus-banner.jpg'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 61%; 
background-size:100% auto;}

@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%;}
#finance-banner {background-position:left 40% bottom 50%;}
#worcester-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%,130% auto;}

#finance-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/finance-banner.png'); 
background-repeat:no-repeat,no-repeat; 
background-position:top 0 right 0,left 20% bottom 45%; 
background-size:100% 100%,130% auto;}

#worcester-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/worcester-banner.jpg'); 
background-repeat:no-repeat,no-repeat; 
background-position:top 0 right 0,left 40% bottom 50%;
background-size:100% 100%,130% auto;}

#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%,130% auto;}

#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%,130% auto;}
}

@media only screen and ( max-width:980px) {
#heating-banner .wrapper,
#finance-banner .wrapper,
#worcester-banner .wrapper,
#testimonials-banner .wrapper,
#contactus-banner .wrapper,
.slide-inn { height:200px;}

#heating-banner,
#finance-banner,
#worcester-banner,
#testimonials-banner,
#contactus-banner  {float:left; width:100%; position:relative; height:200px;}

.slide-inn .btn { margin:20px 0;}
.slide-inn .btn a,.slide-inn .btn a:hover {background-position: top 12px right 15px;font-size: 22px;padding: 6px 40px 6px 25px;}

}

@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%,160% auto;background-position: top 0 right 0%,left 0% bottom 50%;}
#finance-banner,#contactus-banner { background-size:100% 100%,150% auto;background-position: top 0 right 0%,left 0% bottom 60%;}

}

@media only screen and ( max-width:520px) {
#heating-banner,
#finance-banner,
#worcester-banner,
#testimonials-banner,
#contactus-banner { background-size:100% 100%,100% auto;}

#heating-banner,#finance-banner { background-size:100% 100%,200% auto;}
#worcester-banner,#testimonials-banner,#contactus-banner {background-size:100% 100%,200% auto; background-position: top 0 right 0%,left 50% bottom 50%;}

.slide-inn h1 { font-size:22px; line-height:25px;}
.slide-inn .btn a,.slide-inn .btn a:hover { background-position: top 10px right 10px; font-size:17px; padding: 6px 35px 6px 20px;}
}

@media only screen and ( max-width:420px) {
#heating-banner,#finance-banner { background-size:100% 100%,280% auto;}
.slide-inn .btn a,.slide-inn .btn a:hover { background-position: top 8px right 10px; font-size:15px; padding: 6px 35px 6px 20px;}

}