#slider { float:left; width:100%;position:relative; }

.slide1,.slide2  {float:left; width:100%; height:500px;}

.slide1 { 
background-image:
url('../images/slide/home_banner-graphic1.png'),
url('../images/slide/home-banner-boiler-image.png'),
url('../images/slide/home-slide1.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: left 38% top 50%, right 20% top 50%, right 0px bottom 50%;
background-size: 47% auto, 13% auto,100% auto;}

.slide2 { 
background-image:
url('../images/slide/home-slide2.png');
background-repeat:no-repeat; 
background-position:right 0px bottom 50%;
background-size: 100% auto;}
.slide2 .wrapper { display:table;}

.slide-text { display:table-cell; height:500px; vertical-align: bottom; padding:0 0 7%; text-align: center;}
.slide-text h1 { font-size:45px; line-height:50px; color:#414042; font-family:'Montserrat Light';}
.slide-text h1 b {font-family:'Montserrat Bold';}
.slide-text .btn { float:left; width:100%; margin:20px 0 0;}
.slide-text .btn a { background:#005cab; border:5px solid #fff; font-size:28px; font-weight: normal; color:#fff; padding:10px 30px; border-radius:18px;}
.slide-text .btn a:hover { background:#eb191c;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, /* put webkit CSS here*/
.slide1 { 
background-image:
url('../images/slide/home_banner-graphic1.png'),
url('../images/slide/home-banner-boiler-image.png'),
url('../images/slide/home-slide1.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: left 40% top 50%, right 25% top 50%, right 0px bottom 50%;
background-size: 60% auto, 30% auto,100% auto;}
}


@media only screen and ( max-width:1800px) {
.slide1 {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) {
.slide1,.slide2,.slide-text   {height:400px;}	
.slide1 { 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) {
.slide1 {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) {


}
@media only screen and ( max-width:900px) {

}

@media only screen and ( max-width:767px) {
.slide1,.slide2,.slide-text  {height:300px;}
.slide-text { text-align:center; vertical-align:middle; padding:0px;}
.slide-text.slide-text1 { text-align:center;}
.slide-text h1 { font-size:25px; line-height:30px;}
.slide-text h1 { color:#fff;}
.slide-text h1 br,.slide-text p br { display:none;}
.slide-text .btn a { font-size:20px;padding:8px 24px; border:3px solid #fff;}

.slide1 { 
background-image:
url('../images/slide/home_banner-graphic1.png'),
url('../images/slide/home-banner-boiler-image.png'),
url('../images/slide/home-slide1.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: left 38% top 50%, right 0% top 50%, right 0px bottom 50%;
background-size: 95% auto, 0% auto,100% auto;}

.slide2 { 
background-image:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/slide/home-slide2.png');
background-repeat:no-repeat,no-repeat; 
background-position:top 0 left 0,right 0px bottom 0%;
background-size:100% 100%,100% auto;}
}

@media only screen and ( max-width:640px) {
.slide-text h1 { font-size:22px; line-height:25px;}
.slide-text p { font-size:16px; line-height:25px;}
}

@media only screen and ( max-width:560px) {	
.slide2 { background-position:top 0 left 0,right 0px bottom 0%;background-size:100% 100%,150% auto;}
}

@media only screen and ( max-width:460px) {	
.slide1,.slide2,.slide-text  {height:250px;}

.slide-text h1 { font-size:20px; line-height:24px;}
.slide-text p { font-size:15px; line-height:22px;}

.slide-text .btn a { font-size:17px;padding:8px 20px;}
}


@media only screen and ( max-width:360px) {	
.slide1,.slide2,.slide-text  {height:200px;}
.slide-text h1 { font-size:18px; line-height:22px;}
.slide-text p { font-size:14px; line-height:20px;}
}



