#slider { float:left; width:100%; }

.slider1,.slider2,.slider3,.slider4,.slider4  {float:left; width:100%; height:500px;}

.slider1 .wrapper,.slider2 .wrapper,.slider3 .wrapper,.slider4 .wrapper { display:table;}

.slider1 { 
background-image:
url('../images/slide/home-banner-orange-circle.png'),
url('../images/slide/home-banner1.jpg');
background-repeat: no-repeat,no-repeat; 
background-position:left 0%  bottom 0%,top 0% right 0%;
background-size:52% 100%,58% auto;}

.slider2 { 
background-image:
url('../images/slide/home-banner-orange-circle.png'),
url('../images/slide/home-banner2.jpg');
background-repeat: no-repeat,no-repeat; 
background-position:left 0%  bottom 0%,top 0% right 0%;
background-size:52% 100%,58% auto;}

.slider3 {
background: 
url('../images/slide/home_banner-graphic3.png'),
url('../images/slide/home-banner-boiler-image.png'),
url('../images/slide/home-banner3.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position:left 36% top 50%, right 20% top 50%,right 0px bottom 50%;
background-size:48% auto,13% auto,100% auto;}

.slider4 { 
background-image:
url('../images/slide/home-banner-orange-circle.png'),
url('../images/slide/home-banner4.png');
background-repeat: no-repeat,no-repeat; 
background-position:left 0%  bottom 0%,top 0% right 0%;
background-size:52% 100%,58% auto;}

.slide-text { display:table-cell; height:500px; vertical-align:middle; text-align: left;}
.slide-text h2 { font-size:60px; line-height:70px; color:#fff;}
.slide-text h2 span{ font-size:60px; line-height:60px; color:#000;}
.slide-text h3 { color:#000;font-family: 'Helvetica-Condensed-Black'; font-size:35px; line-height:40px;}
.slide-text .btn {  margin:2% 0 0; float: left;}
.slide-text .btn a { border:2px solid #fff; padding:8px 30px; font-size:20px; color:#fff; border-radius:28px;}
.slide-text .btn a:hover { background:#333;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, /* put webkit CSS here*/
.slider3 {
background: 
url('../images/slide/home_banner-graphic1.png'),
url('../images/slide/home-banner-boiler-image.png'),
url('../images/slide/home-banner3.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position:left 36% top 25%, right 20% top 24%, right 0px bottom 50%;
background-size:48% auto, 13% auto,100% auto;}
}

@media only screen and ( max-width:1800px) {
.slider3 {background-position: left 25% top 40%, right 8% top 40%, left 0% bottom 0%;background-size: 65% auto, 18% auto, 100% auto;}	

}


@media only screen and ( max-width:1640px) {
.slider1,.slider2,.slider3,.slider4,.slide-text   {height:400px;}	

.slider3 { background-position:left 34% top 50%, right 14% top 50%, right 0% top 0%;background-size: 55% auto, 15% auto, 100% 100%;}

}

@media only screen and ( max-width:1170px) {
.slider3 {background-position:left 25% top 50%, right 6% top 50%, left 0% bottom 0%;background-size: 65% auto, 18% auto, 100% 100%;}

}

@media only screen and ( max-width:1100px) {
.slider1,.slider2,.slider3,.slider4,.slide-text   {height:380px;}

.slide-text { text-align:center;}
.slide-text h3 { color:#fff; margin:0px; padding:0px;}
.slide-text h2, .slide-text h2 span{ font-size:34px; line-height:40px; color:#fff;}
.slide-text h2 br { display:none;}
.slide-text .btn { float:none; margin:4% 0 0;}
.slide-text .btn a {border: 2px solid #fff; padding: 8px 25px; font-size: 16px;}

.slider1 { 
background-image:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/home-banner1.jpg');
background-repeat: no-repeat,no-repeat; 
background-position:left 0%  bottom 0%,top 0% right 0%;
background-size:100% auto,100% auto;}

.slider2 { 
background-image:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/home-banner2.jpg');
background-repeat: no-repeat,no-repeat; 
background-position:left 0%  bottom 0%,top 0% right 0%;
background-size:100% auto,100% auto;}

.slider4 { 
background-image:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/home-banner4.png');
background-repeat: no-repeat,no-repeat; 
background-position:left 0%  bottom 0%,top 0% right 0%;
background-size:100% auto,100% auto;}

}

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

}

@media only screen and ( max-width:767px) {
.slider1,.slider2,.slider3,.slider4,.slide-text   {height:280px;}

}

@media only screen and ( max-width:640px) {
.slide-text h2, .slide-text h2 span { font-size:24px; line-height:40px; margin:0px; padding:0px; color:#fff;}
.slide-text h3 { font-size:25px; line-height:30px;}
.slide-text p { font-size:16px; line-height:25px;}

.slide-text .btn a {border: 2px solid #fff; padding:6px 20px; font-size: 14px;}

}

@media only screen and ( max-width:560px) {	
.slider3 { background-position:left 50% top 50%, left 0% top 0%, right 0% top 0%; background-size:100% auto, 0% auto, 100% 100%;}

}

@media only screen and ( max-width:460px) {	
.slider1,.slider2,.slider3,.slider4,.slide-text  {height:220px;}


.slide-text h2, .slide-text h2 span { font-size:19px; line-height:32px; color:#fff;}
.slide-text h3 { font-size:15px; line-height:30px;}

/*.slider3 {
    background-position: left 50% top 10%, left 0% top 0%, right 0% top 0%;
    background-size: 70% auto, 0% auto, 100% 100%;
}*/
}


@media only screen and ( max-width:360px) {	
.slider1,.slider2,.slider3,.slider4,.slide-text  {height:200px;}
.slide-text h2, .slide-text h2 span { font-size:18px; line-height:22px; color:#fff;}
.slide-text p { font-size:14px; line-height:20px;}

/*.slider3 {
    background-position: left 50% top 12%, left 0% top 0%, right 0% top 0%;
    background-size: 80% auto, 0% auto, 100% 100%;
}*/
}