#service-banner,#offers-banner,#worcester-banner,#contactus-banner {float:left; width:100%; position:relative; height:500px;}
#service-banner .wrapper,#offers-banner .wrapper,#worcester-banner .wrapper,#contactus-banner .wrapper { display:table;}

#service-banner {
background:
url('../images/service-banner.png');
background-repeat:no-repeat; 
background-position:left 0 bottom 40%; 
background-size:cover;}

#offers-banner {
background:
url('../images/offers-banner.png');
background-repeat:no-repeat; 
background-position:left 0 bottom 40%; 
background-size:cover;}

#worcester-banner {
background:
url('../images/worcester-banner.png');
background-repeat:no-repeat; 
background-position:left 0 bottom 40%; 
background-size:cover;}
.worcester-logo { float:left; width:100%; text-align:left; margin:28px 0 0 0;}
.worcester-logo img {}

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

.banner-inn { text-align: center; display:table-cell; vertical-align: top; padding:15% 0 0;height:500px;}
.banner-inn h1 { color:#fff; font-size:40px; line-height:50px;font-weight:normal; margin:0px; padding:0;}
.banner-inn .btn { float:left; width:100%; margin:30px 0 0;}
.banner-inn .btn a { background:#38b54a; border:4px solid #fff; color:#fff; font-size:26px; padding:6px 20px; border-radius:20px; font-weight: normal; }
.banner-inn .btn a:hover { background:#9e0b0f;  border:4px solid #9e0b0f;}


@media only screen and ( max-width:1640px) {
.banner-inn { vertical-align:middle;}
}


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

}

@media only screen and ( max-width:1200px) {
.banner-inn h1 { font-size:35px; line-height:40px;}

#service-banner,#offers-banner,#worcester-banner,#contactus-banner { height:400px;}
.banner-inn { vertical-align:middle; height:450px;}

.worcester-logo {left:7%; bottom: -22px; position:absolute;}
.worcester-logo img { width:12% !important;}
}

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


.banner-inn h1 { color:#fff;}
.banner-inn h1 br { display:none;}
.banner-inn { text-align:center;}

#service-banner {
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/service-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:top 0 left 0,left 0 bottom 60%; 
background-size:100% 100%,cover;}

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

#contactus-banner {
background:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('../images/contactus-banner.png');
background-repeat:no-repeat,no-repeat; 
background-position:top 0 left 0,left 0 bottom 32%; 
background-size:100% 100%,cover;}

}

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

}

@media only screen and ( max-width:640px) {
.banner-inn .btn a { font-size:21px;}

.worcester-logo {left:7%; bottom: -15px; position:absolute;}
.worcester-logo img { width:15% !important;}
}

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

#worcester-banner .banner-inn h1 { font-size:23px; line-height:30px;}

#service-banner,#offers-banner,#worcester-banner,#contactus-banner { height:350px;}
.banner-inn { vertical-align: bottom; height:250px;}
}

@media only screen and ( max-width:360px) {
#service-banner,#offers-banner,#worcester-banner,#contactus-banner { height:300px;}

}