
.slide-inn { text-align: right; display: table-cell; vertical-align: middle; }
.slide-inn h1 { font-size:50px; line-height:60px; color: #d02128; font-weight: normal; }
.slide-inn p { color: #fff; font-size:22px; }
.slide-inn h1 b { font-weight: bold; }

.slide-inn .btn { float: left; width:100%; margin:15px 0 0;}
.slide-inn .btn a { text-decoration:none; background:#f8cf13; color:#fff; text-transform:none; font-size:19px; padding:8px 20px; border-radius:18px; font-weight: normal; }
.slide-inn .btn a:hover { background:#c6a81f; }

#heating-fires-banner .wrapper, #bathrooms-banner .wrapper, #service-plans-banner .wrapper, #videos-banner .wrapper, #worcester-banner .wrapper,#contactus-banner .wrapper,#newcastle-banner .wrapper,#gateshead-banner .wrapper,#north-south-banner .wrapper,#northumberland-banner .wrapper 
{ display: table; height:260px;}

#heating-fires-banner, #bathrooms-banner, #service-plans-banner, #videos-banner, #worcester-banner,#contactus-banner,#newcastle-banner,#gateshead-banner,#north-south-banner,#northumberland-banner { float: left; width: 100%;position: relative; height: 260px; }

#heating-fires-banner { 
background: 
url('../images/heating-fires-banner.png'); 
background-repeat: no-repeat; 
background-position: left 0 bottom 50%; 
background-size: 100% auto; }

#bathrooms-banner { 
background: url('../images/bathrooms-banner.png'); 
background-repeat: no-repeat;
background-position: left 0 bottom 30%; 
background-size: 100% auto; }

#service-plans-banner { 
background: 
url('../images/service-plans-banner.png'); 
background-repeat: no-repeat; 
background-position: left 0 bottom 78%; 
background-size: 100% auto; }

#videos-banner { 
background: 
url('../images/videos-banner.png'); 
background-repeat: no-repeat; 
background-position: left 0 bottom 40%; 
background-size: 100% auto; }

#worcester-banner { 
background: 
url('../images/worcester-banner.png'); 
background-repeat: no-repeat; 
background-position: left 0 bottom 60%; 
background-size: 100% auto; }

#contactus-banner { 
background: url('../images/contactus-banner.png'); 
background-repeat: no-repeat; 
background-position: left 0 bottom 35%; 
background-size: 100% auto; }

#newcastle-banner { 
background: 
url('../images/newcastle-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 50%; 
background-size:100% auto; }

#gateshead-banner { 
background: 
url('../images/gateshead-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 50%; 
background-size:100% auto; }

#north-south-banner { 
background: 
url('../images/north-south-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 50%; 
background-size:100% auto; }

#northumberland-banner{ 
background: 
url('../images/northumberland-banner.png'); 
background-repeat:no-repeat; 
background-position:left 0 bottom 50%; 
background-size:100% auto; }

}

@media only screen and ( max-width:1520px) {
#heating-fires-banner, #bathrooms-banner, #service-plans-banner, #videos-banner, #worcester-banner,#contactus-banner,#newcastle-banner,#gateshead-banner,#north-south-banner,#northumberland-banner { background-size:250% auto; }
.slide-inn h1 br { display:none;}
}

@media only screen and ( max-width:1200px) {
.slide-inn { text-align:center;}
.slide-inn h1 { color:#fff;}

#heating-fires-banner { 
background: 
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/heating-fires-banner.png'); 
background-repeat: no-repeat,no-repeat; 
background-position:top 0 right 0,left 0 bottom 50%; 
background-size:100% 100%,100% auto; }
#bathrooms-banner { 
background: 
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/bathrooms-banner.png'); 
background-repeat: no-repeat,no-repeat;
background-position:top 0 right 0,left 0 bottom 50%; 
background-size:100% 100%,100% auto; }
#service-plans-banner { 
background: 
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/service-plans-banner.png'); 
background-repeat: no-repeat,no-repeat; 
background-position:top 0 right 0,left 0 bottom 50%; 
background-size:100% 100%, 100% auto; }
#videos-banner { 
background: 
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/videos-banner.png'); 
background-repeat: no-repeat,no-repeat; 
background-position:top 0 right 0,left 0 bottom 50%;
background-size:100% 100%, 100% auto; }
#worcester-banner { 
background: 
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/worcester-banner.png'); 
background-repeat: no-repeat,no-repeat; 
background-position:top 0 right 0,left 0 bottom 50%;
background-size:100% 100%, 100% auto; }
#contactus-banner { 
background: 
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/contactus-banner.png'); 
background-repeat: no-repeat,no-repeat; 
background-position:top 0 right 0,left 0 bottom 50%; 
background-size:100% 100%, 100% auto; }


}

@media only screen and ( max-width:980px) {
.slide-inn, .slide-inn2 { text-align: center; }

#heating-fires-banner {  background-size:250% auto; }
}

@media only screen and ( max-width:767px) {
#heating-fires-banner, #bathrooms-banner, #service-plans-banner, #videos-banner, #worcester-banner,#contactus-banner,#newcastle-banner,#gateshead-banner,#north-south-banner,#northumberland-banner { height: 260px; }

#heating-fires-banner .wrapper, #bathrooms-banner .wrapper, #service-plans-banner .wrapper, #videos-banner .wrapper, #worcester-banner .wrapper,#contactus-banner .wrapper,#newcastle-banner .wrapper,#gateshead-banner .wrapper,#north-south-banner .wrapper,#northumberland-banner .wrapper { height: 260px; }

.slide-inn h1 { font-size: 30px; line-height: 35px; }
.slide-inn .btn a { padding: 5px 20px; font-size:19px; }

.slide-inn p { font-size:19px;}

}

@media only screen and ( max-width:640px) {
}

@media only screen and ( max-width:520px) {
#heating-fires-banner, #bathrooms-banner, #service-plans-banner, #videos-banner, #worcester-banner,#contactus-banner,#newcastle-banner,#gateshead-banner,#north-south-banner,#northumberland-banner { background-size:350% auto; }
.service-plans-text1 h1 { font-size: 50px; }
.slide-inn p { font-size:17px;}

}

@media only screen and ( max-width:420px) {
#heating-fires-banner, #bathrooms-banner, #service-plans-banner, #videos-banner, #worcester-banner,#contactus-banner,#newcastle-banner,#gateshead-banner,#north-south-banner,#northumberland-banner  { height: 220px; background-size:400% auto; }

#heating-fires-banner .wrapper, #bathrooms-banner .wrapper, #service-plans-banner .wrapper, #videos-banner .wrapper, #worcester-banner .wrapper,#contactus-banner .wrapper,#newcastle-banner .wrapper,#gateshead-banner .wrapper,#north-south-banner .wrapper,#northumberland-banner .wrapper { height: 220px; }

.slide-inn h1 { font-size: 25px; line-height: 30px; }
.slide-inn .btn a { padding: 5px 20px; font-size: 18px; }


}
@media only screen and ( max-width:320px) {
}
