#slider { float:left; width:100%;}

.slider1, .slider2{float:left; width:100%; height:445px; position:relative;}


.slider1 { 
background-image:
url('../images/Worcester-10year-graphic.png'),
url('../images/home-banner-boiler-image.png'),
url('../images/fit.png'),
url('../images/homebanner1.jpg');
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position:left 25% top 50%, right 37% top 50%, right 25% top 50%,right 0% bottom 0%;
background-size:36% auto, 14% auto,8% auto, 100% auto;}

.slider-first {text-align:left; display: table-cell; vertical-align:middle; height:450px;}
.slider-first h1 { font-size:70px; padding-bottom:10px; color:#2b6ea5; font-family:'harabararegular'; line-height:normal; }
.slider-first p span {color:#e15829; font-size:28px;}
.slider-first .btn a {margin:10px 0 0 0; font-weight:normal; text-decoration: none; color: #2b6ea5;text-transform: none;font-size: 21px;padding: 10px 20px;border-radius: 12px;text-align: center;
display: inline-block; border: 2px solid #2b6ea5;border-radius: 22px;}
.slider-first .btn a:hover { background: #2b6ea5; color: #fff; }

.slider2 { 
background-image:
url('../images/homebanner2.png');
background-repeat: no-repeat; 
background-position: right 0% top 0%;
-o-background-size: cover;
-moz-background-size: auto auto;
-webkit-background-size:auto auto;
background-size: auto auto;}

.slider2 .wrapper { display:table;}
.slide-form {width: 22%;text-align: right;position: absolute;top: 15%;right: 22%;}
.slide-form h1 { font-size:30px; padding-bottom:20px; color:#0c56a3; text-align:left;}
.slide-form input,.slide-form textarea {background:#fff; font-family:'Montserrat Regular';font-size:17px; font-weight: normal; color:#746e70; border:2px solid #746e70; border-radius:5px; padding:8px 15px;  margin:0 0 5px; width:100%;}
.slide-row.pad1 input { background:#000154; padding:6px 10px; border:0px; color:#fff; border-radius:0px; margin:6px 0; font-size:18px; cursor:pointer;}
.slide-row.pad1 input { width:auto; float:left; background:#00a499; color:#fff; border-radius:0px; border:0px;  padding:8px 20px;} 
.slide-row.pad1 input:hover {background:#0c569c; cursor:pointer;}




@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, /* put webkit CSS here*/
.slider1 { 
background-image:
url('../images/Worcester-10year-graphic.png'),
url('../images/home-banner-boiler-image.png'),
url('../images/fit.png'),
url('../images/homebanner1.jpg');
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position:left 25% top 50%, right 37% top 50%, right 25% top 50%,right 0% bottom 0%;
background-size:36% auto, 14% auto,8% auto, 100% auto;}
}



@media only screen and ( max-width:1800px) {
.slider1 { 
background-position:left 25% top 50%, right 37% top 50%, right 25% top 50%,right 0% bottom 0%;
background-size:36% auto, 14% auto,8% auto, auto auto;}

.slider2 {background-position: right 0% top 30%;background-size: auto auto;}	
.slide-form { right:25%;}
}


@media only screen and ( max-width:1640px) {
.slider1,.slider2 {height:400px;}	
.slider1 {
	/*background-position:left 25% top 50%, right 37% top 50%, right 25% top 50%, right 0% bottom 0%; 
	background-size:36% auto, 14% auto, 8% auto, 100% auto;*/ 
background-position:left 25% top 50%, right 37% top 50%, right 25% top 50%,right 0% bottom 0%;
background-size:36% auto, 14% auto,8% auto, auto auto;	
	}

.slider2 {background-position: right 0% top 20%;background-size: auto auto;}
.slide-form { right:30%;}	
}

@media only screen and ( max-width:1200px) {
.slider1 { 
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position:left 15% top 50%, right 35% top 50%, right 15% top 50%,right 0% bottom 50%;
background-size:40% auto, 16% auto,12% auto,auto auto;}

.slide-form { width:32%;}
.slider2 {background-position: right 0% top 20%;background-size: cover;}
}

@media only screen and ( max-width:1100px) {

.slider2 {
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/homebanner2.png'); 
background-position:top 0 center; 
background-repeat:no-repeat;
background-size:100% 100%,200% auto;}


.slider2 {background-position: left 0% top 20%;background-size: 180% auto;}
.slide-form { width:38%; left:20%;}
.slide-form h1 { color:#fff;}
.slide-form input, .slide-form textarea { border:2px solid #fff; font-weight:normal; font-family:Arial, Helvetica, sans-serif; font-size:17px;}

	
}
@media only screen and ( max-width:960px) {
.slider1 { 
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position:left 5% top 50%, right 30% top 50%, right 6% top 50%,right 0% bottom 45%;
background-size:50% auto, 20% auto,15% auto,auto auto;}

.slider2 {background-position: left 15% top 20%;background-size:230% auto;}
}

@media only screen and ( max-width:767px) {
	
.slider1 { 
background-image:
url('../images/Worcester-10year-graphic.png'),
url('../images/home-banner-boiler-image.png'),
url('../images/fit.png'),
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/homebanner1.jpg');
background-repeat: no-repeat,no-repeat, no-repeat, no-repeat, no-repeat;
background-position:left 5% top 50%, right 30% top 50%, right 6% top 50%,top 0 left 0,right 0% bottom 45%;
background-size:50% auto, 20% auto,15% auto,100% 100%,auto auto;}
	
.slider1,.slider2 {height:300px;}

.slider2 {background-position: left 20% top 50%;background-size:230% auto;}	
.slide-form { width: 90%; margin: 0 auto; text-align: center; left: 0; right: 0;}
.slide-row { width: 45%; float: left; margin-right:15px;}
.slide-row.pad1 input { width:100%; padding:12px 0;}
}


@media only screen and ( max-width:640px) {
.slider1,.slider2 {height:250px;}	

}


@media only screen and ( max-width:540px) {	

.slide-form h1 { font-size:25px; line-height:25px;}
.slide-form { width:80%;}	

}

@media only screen and ( max-width:480px) {	
.slide-form h1 { font-size:25px; padding-bottom:15px;}
}

@media only screen and ( max-width:460px) {	
.slider1,.slider2 {height:200px;}	

.slider2 {background-position: left 20% top 50%;background-size:270% auto;}	
.slide-form { width:90%;}
.slide-row { width:45%; margin-right:10px;}
.slide-row.pad1 input { font-size:15px; padding:12px 0;}
}





