
#banner1 { float:left; width:100%; background:#005ba3;}
.banner1-left {
float:left; width:50%;margin:0; height:500px;
background:url('../images/midpage-banner.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 75%;}

.banner1-right { float:right; width:50%; padding:114px; background:#005ba3 ;}
.banner1-right h2 { color: #fff; font-size:50px; line-height: 60px;font-family:'Montserrat Bold';}
.banner1-right p { color: #fff;font-weight: normal;line-height: 23px; font-size: 18px;}

.banner1-right .btn { float:left; width:100%}
.banner1-right .btn a { background:#fff; margin:25px 0 0; display:inline-block; padding:10px 30px; border-radius:8px; color:#ebb031; font-size:18px;}
.banner1-right .btn a:hover { background:#ebb031; color:#fff;}

#banner2 { float:left; width:100%;  background:#005ba3;}
.banner2-left {
float:left; width:50%;margin:0; height:500px;
background:url('../images/midpage-banner-image2.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 0%;}

#banner3 { float:left; width:100%;  background:#005ba3;}
.banner3-left {
float:left; width:50%;margin:0; height:500px;
background:url('../images/midpage-banner-image3.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 60%;}

#banner4 { float:left; width:100%;  background:#005ba3;}
.banner4-left {
float:left; width:50%;margin:0; height:500px;
background:url('../images/midpage-banner-image4.png');
background-repeat: no-repeat;
background-size:101% auto;
background-position:left 0% bottom 30%;}

@media screen and (-webkit-min-device-pixel-ratio:0) {

}


@media only screen and ( max-width:1800px) {

}


@media only screen and ( max-width:1640px) {
.banner2-left {height: 500px;background-position:left 50% bottom 30%; background-size: auto auto;}
.banner1-right {padding: 105px;}	

.banner3-left { background-size:auto auto;}
.banner4-left { background-size:auto auto; background-position:left 30% bottom 100%;}
}

@media only screen and ( max-width:1400px) {
#banner3 .banner1-right { padding:100px;}
#banner4 .banner1-right { padding:100px;}
}

@media only screen and ( max-width:1350px) {
.banner1-right { padding:100px;}
.banner1-right h2 { font-size:26px; line-height:35px;}
.banner1-right h2 br,.banner1-right p br { display:none;}

	

}

@media only screen and ( max-width:1200px) {

}

@media only screen and ( max-width:1100px) {
#banner1,#banner2,#banner3,#banner4 { position:relative;}
.banner1-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,100% auto;
background-position:top 0 left 0,left 0% bottom 60%;}

.banner2-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner-image2.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,120% auto;
background-position:top 0 left 0,left 0% bottom 60%;}

.banner3-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner-image3.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,100% auto;
background-position:top 0 left 0,left 0% bottom 60%;}

.banner4-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner-image4.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,100% auto;
background-position:top 0 left 0,left 0% bottom 60%;}


.banner1-right,.banner2-right,.banner3-right,.banner4-right { padding:0px; width:100%; text-align:center; position:absolute; top:25%; background:none; padding:15px;}

#banner3 .banner1-right { padding:15px;}
#banner4 .banner1-right  { padding:15px;}
}

@media only screen and ( max-width:767px) {
.banner3-left {background-size:100% 100%,150% auto;}
.banner4-left {background-size:100% 100%,150% auto; background-position:left 30% bottom 100%;}
}

@media only screen and ( max-width:640px) {
.banner1-left,.banner2-left,.banner3-left,.banner4-left  {height:400px;}
.banner1-right,.banner2-right,.banner3-right,.banner4-right  { height:400px; background-position:top 0 left 0,left 0% bottom 70%;}
}

@media only screen and ( max-width:560px) {	
.banner1-left,.banner2-left,.banner3-left,.banner4-left  {height:350px;}
.banner1-right,.banner2-right,.banner3-right,.banner4-right  { height:350px; background-position:top 0 left 0,left 0% bottom 70%;}
.banner1-right { top:15%;}
.banner1-right h2 { font-size:22px;}
.banner1-right p { font-size:16px;}

#banner2 .banner1-right { top:15%;}
#banner3 .banner1-right { top:15%;}
#banner4 .banner1-right { top:15%;}

.banner2-left {background-size: 100% 100%,140% auto;}
}

@media only screen and ( max-width:460px) {	
.banner1-left,.banner2-left,.banner3-left,.banner4-left  {height:320px;}
.banner1-right,.banner2-right,.banner3-right,.banner4-right  { height:320px;}

.banner1-right { top:3%;}
#banner2 .banner1-right { top:0%;}
#banner4 .banner1-right { top:12%;}

.banner3-left {background-size:100% 100%,180% auto;}
.banner3-right { top:20%;}
#banner3 .banner1-right { top:12%;}
}


@media only screen and ( max-width:360px) {	
.banner4-left {background-size:100% 100%,170% auto; background-position:left 50% bottom 100%;}

}


