#heating-banner,#general-plumbing-banner,#worcester-banner,#powerflush-banner,#contactus-banner,#aircon-banner { float:left; width:100%; height:230px;}

#heating-banner .wrapper,#general-plumbing-banner .wrapper,#worcester-banner .wrapper,#powerflush-banner .wrapper,#contactus-banner .wrapper,#aircon-banner .wrapper { display:table;}

.slide-inn { text-align: left; display:table-cell; vertical-align:middle;height:230px;}
.slide-inn h1 { color:#0085cc; font-size:38px; line-height:45px;font-weight:normal; margin:0px; padding:0px;}
.slide-inn h1 span { color:#f19128;}

.slide-inn .btn { float:left; width:100%; margin:3% 0 0;}
.slide-inn .btn a { background:#73c200; color:#fff; text-transform:none; font-size:25px; padding:10px 25px; border-radius:25px; font-weight: normal; }
.slide-inn .btn a:hover { background:#00aeef; }

#heating-banner { 
background:
url('../images/heating-banner.png'); 
background-repeat:no-repeat, no-repeat; 
background-position: top 45% left 0%;
background-size:100% auto;}
#heating-banner .slide-inn h1 { color:#fff;}


#aircon-banner { 
background:
url('../images/aircon-banner.png'); 
background-repeat:no-repeat, no-repeat; 
background-position: top 10% left 0%;
background-size:100% auto;}
#aircon-banner .slide-inn h1 { color:#fff;}


#general-plumbing-banner { 
background:
url('../images/slide/home-banner-van.png'),
url('../images/general-plumbing-banner.png'); 
background-repeat:no-repeat, no-repeat; 
background-position:right 20% bottom 10%, left 0% bottom 10%; 
background-size:auto auto, 100% auto;
animation: animatevan1 4s normal 1;}
#general-plumbing-banner .slide-inn h1 { color:#0085cc;}

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

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

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

#worcester-banner .slide-inn, #powerflush-banner .slide-inn, #contactus-banner .slide-inn { text-align: right; display:table-cell; vertical-align:middle;height:230px;}
#worcester-banner .slide-inn h1, #powerflush-banner .slide-inn h1, #contactus-banner .slide-inn h1 { color:#fff; font-size:38px; line-height:45px;font-weight:normal; margin:0px; padding:0px;}

@keyframes animatevan1 {
    from {background-position: right -50% bottom 10%, left 0% bottom 10%}
    to {background-position: right 20% bottom 10%, left 0% bottom 10%}
}

@media only screen and ( max-width:1750px) {
#heating-banner .slide-inn h1 {font-size:30px; line-height:38px;}

}

@media only screen and ( max-width:1200px) {
#general-plumbing-banner { 
background-position:right 20% bottom 10%, left 0% bottom 10%; 
background-size:30% auto, 100% auto;}

	
#slide-inn { text-align:center; padding:20px 0;}
#slide-inn h1 { font-size:30px; line-height:40px; margin:0px;}
}

@media only screen and ( max-width:980px) {
#general-plumbing-banner .slide-inn h1 { font-size:26px; line-height:30px; padding:0px;}
	
}

@media only screen and ( max-width:767px) {
#general-plumbing-banner { 
background-position:right 20% bottom 10%, left 0% bottom 10%; 
background-size:30% auto,cover;}
#worcester-banner .slide-inn, #powerflush-banner .slide-inn, #contactus-banner .slide-inn,#aircon-banner .slide-inn{height:180px;}

	
#aircon-banner  { 
background:
linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),
url('../images/aircon-banner.png'); 
background-repeat:no-repeat, no-repeat; 
background-position:left 0% top 0%, right 0 bottom 80%; 
background-size:100% 100%,cover;}	
	
#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:left 0% top 0%, left 0 bottom 60%; 
background-size:100% 100%, 100% auto;}

#powerflush-banner { 
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/powerflushing-banner.png'); 
background-repeat:no-repeat, no-repeat; 
background-position:left 0% top 0%, left 0 bottom 60%; 
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/contact-banner.png'); 
background-repeat:no-repeat, no-repeat; 
background-position:left 0% top 0%, left 0 bottom 25%; 
background-size:100% 100%, 100% auto;}

.slide-inn h1 { font-size:24px; line-height:30px; padding:0px;}
.slide-inn .btn a {font-size: 19px; padding: 5px 20px;}
}
@media only screen and ( max-width:640px) {
#heating-banner,#general-plumbing-banner,#worcester-banner,#powerflush-banner,#contactus-banner,.slide-inn,#aircon-banner .slide-inn {height:180px;}	

}

@media only screen and ( max-width:520px) {
#heating-banner .slide-inn h1 { font-size:22px; line-height:26px;}
}

@media only screen and ( max-width:420px) {
#general-plumbing-banner .slide-inn h1 { font-size:16px; line-height:24px;}	
.slide-inn h1 { font-size:20px; line-height:25px;}
.slide-inn .btn a {font-size: 17px; padding: 5px 20px;}

}

@media only screen and ( max-width:360px) {
.slide-inn .btn a {font-size: 15px; padding: 3px 15px;}
}