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

.slide1,.slide2,.slide3 {float:left; width:100%; height:500px; position:relative;}


.slide1 {  
background-image:
url('../images/slide/home-banner-overlay.png'),
url('../images/slide/home-slide1.jpg');
background-repeat:no-repeat,no-repeat; 
background-position:top 100% right 0,left 0 bottom 92%;
background-size:60% auto,60% auto;}

.slide1 .wrapper { display:table;}

.slide1-text { text-align:right; height:500px; display:table-cell; vertical-align:middle;}
.slide1-text h1 { color:#fff; font-size:50px; line-height:55px;}
.slide1-text h4 { color:#fff; font-size:25px; line-height:30px; font-weight:normal;  font-weight: normal;}
.slide1-text .btn { margin:20px 0 0;}
.slide1-text .btn a  { color:#fff; background:#ed1c24 url('../images/arrow-icon.png'); background-repeat:no-repeat; background-position:top 15px right 15px; border-radius:22px;  font-size:25px; padding:6px 40px 6px 25px; font-weight:normal;}
.slide1-text .btn a:hover { color:#fff; background:#d21a21 url('../images/arrow-icon-hover.png'); background-repeat:no-repeat; background-position:top 15px right 15px; border-radius:22px;  font-size:25px; padding:6px 40px 6px 25px; font-weight:normal;}

.slide2 { 
background-image:
url('../images/slide/home-slide-graphic1.png'),
url('../images/slide/home-slide-graphic2.png'),
url('../images/slide/home-slide2.png');
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position:left 35% top 50%, right 20% top 50%, right 0px bottom 55%;
background-size: 48% auto, 13% auto, 100% auto;}

.slide3 {  
background-image:
url('../images/slide/home-banner3-boiler.png'),
url('../images/slide/home-slide3.jpg');
background-repeat:no-repeat,no-repeat; 
background-position:top 50% right 7%,left 0 bottom 92%;
background-size:auto auto,100% auto;}


.slide3 .wrapper { display:table;}

.slide3-text { text-align: right; height:500px; display:table-cell; vertical-align:middle;}
.slide3-text h1 { color:#2c75ba; font-size:45px; line-height:50px;}
.slide3-text h4 { color:#262626; padding:15px 0 0; font-size:25px; line-height:30px; font-weight:normal; font-weight: bold;}
.slide3-text .btn { margin:20px 0 0;}
.slide3-text .btn a  { color:#fff; background:#ed1c24 url('../images/arrow-icon.png'); background-repeat:no-repeat; background-position:top 15px right 15px; border-radius:22px;  font-size:25px; padding:6px 40px 6px 25px; font-weight:normal;}
.slide3-text .btn a:hover { color:#fff; background:#d21a21 url('../images/arrow-icon-hover.png'); background-repeat:no-repeat; background-position:top 15px right 15px; border-radius:22px;  font-size:25px; padding:6px 40px 6px 25px; font-weight:normal;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, /* put webkit CSS here*/

}

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

}

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

.slide3 {background-position:top 50% right 2%,left 0 bottom 92%;background-size:auto auto,150% auto;}

}

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

.slide2 {
background-position: left 30% top 50%, right 15% top 50%, right 0px bottom 55%;
background-size: 50% auto, 14% auto, 100% auto;}
}

@media only screen and ( max-width:1320px) {
.slide1,.slide2,.slide3,.slide1-text,.slide3-text {height:350px;}	
.slide1-text,.slide3-text { text-align:center;}
.slide1-text h1 br,.slide1-text h4 br,.slide3-text h1 br,.slide3-text h4 br  { display:none;}
.slide1-text h1,.slide3-text h1 { color:#fff;}
.slide1-text h4,.slide3-text h4 { color:#fff;}

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



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

}

@media only screen and ( max-width:980px) {
.slide2 {
background-position:left 25% top 50%, right 15% top 50%, right 0px bottom 55%;
background-size:56% auto,16% auto,100% auto;}

.slide3 {background-size:100% 100%,auto auto,180% auto;}

}

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


}

@media only screen and ( max-width:767px) {
.slide1-text h1,.slide3-text h1 { font-size:30px; line-height:30px;}
.slide1-text h4,.slide3-text h4 { font-size:18px; line-height:25px;}
.slide1-text .btn,.slide3-text .btn { margin:25px 0 0;}
.slide1-text .btn a,.slide1-text .btn a:hover,.slide3-text .btn a,.slide3-text .btn a:hover {background-position: top 10px right 15px;font-size: 20px;padding: 5px 50px 7px 30px;}

.slide2 {
background-position:left 25% top 50%, right 10% top 50%, right 0px bottom 55%;
background-size:60% auto,16% auto,120% auto;}

.slide3 {  
background-repeat:no-repeat,no-repeat,no-repeat; 
background-position: top 0 left 0,top 100% right 0,left 0 bottom 0%;
background-size:100% 100%,auto auto,200% auto;}

}


@media only screen and ( max-width:640px) {
.slide1,.slide2,.slide3,.slide1-text,.slide3-text {height:300px;}	


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


@media only screen and ( max-width:520px) {	
.slide1,.slide2,.slide3,.slide1-text,.slide3-text {height:280px;}	

.slide3-text  { background-size:100% 100%,300% auto;}
.slide1-text h1,.slide3-text h1 { font-size:22px; line-height:26px;}
.slide1-text h4,.slide3-text h4 { font-size:16px; line-height:20px;}

.slide2 {
background-position:left 43% top 12%, right 50% top 88%, right 0px bottom 55%;
background-size:76% auto,18% auto,150% auto;}

.slide3 {  background-size:100% 100%,250% auto;}
}

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

.slide2 {
background-position: left 43% top 15%, right 44% top 88%, right 0px bottom 55%;
background-size: 82% auto,24% auto,200% auto;}

.slide3 {  background-size:100% 100%,300% auto;}
}

@media only screen and ( max-width:350px) {	
.slide2 {
background-position: left 43% top 15%, right 44% top 85%, right 0px bottom 55%;
background-size: 88% auto,28% auto,200% auto;}

.slide3 {  background-size:100% 100%,360% auto;}
}