#banner1 { float:left; width:100%; background:#1d5aa1;}
.banner1-left {
float:left; width:50%;margin:0; height:500px;
background:url('../images/midpage-banner-image.png');
background-repeat: no-repeat;
background-size: 169% auto;
background-position: left 94% bottom 15%;}

.banner1-right { float:right; width:50%; padding:110px; }
.banner1-right h1 {color:#fff; font-size:40px; line-height:50px;}
.banner1-right p { color:#fff;font-family:'Montserrat Bold'; line-height:26px; font-size:19px;}

.banner1-right .btn { float:left; width:100%}
.banner1-right .btn a { background:#fff; margin:28px 0 0; display:inline-block; padding:12px 30px; border-radius:8px; color:#4cb7f7; font-size:18px; font-weight:normal;}
.banner1-right .btn a:hover { background:#e78018; color:#fff;}

#banner2 { float:left; width:100%; background:#1d5aa1;}
.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 2%;}

#banner3 { float:left; width:100%; background:#1d5aa1;}
.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:#1d5aa1;}
.banner4-left {
float:left; width:50%;margin:0; height:500px;
background:url('../images/banner4.png');
background-repeat: no-repeat;
background-size:100% 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) {
.banner3-left { background-size:160% auto;background-position: left 0 bottom 0;}
.banner4-left { background-size:auto auto; background-position:left 30% bottom 100%;}


.banner1-right { padding: 90px;}
.banner1-right h1 br { display:none;}
.banner1-right h1 { font-size:30px; line-height:40px;}
.banner2-left { height:520px;}

.banner2-left { background-size:160% auto;background-position: right 0 bottom 0;}
}

@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:101px;}
.banner1-right h1 { font-size:24px; line-height:30px;}
.banner1-right h1 br,.banner1-right p br { display:none;}

.banner2-left {background-size: 180% auto; height:514px;}

}

@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-image.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,cover;
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%,cover;
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%,cover;
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%,cover;
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:30%; 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%;}

.banner1-right { top:18%;}
}

@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:20%;}
.banner1-right h1 { font-size:22px;}
.banner1-right p { font-size:16px;}

#banner2 .banner1-right { top:15%;}
#banner3 .banner1-right { top:15%;}
#banner4 .banner1-right { top:15%;}
}

@media only screen and ( max-width:460px) {	
#banner2 .banner1-right { top:12%;}
#banner4 .banner1-right { top:12%;}

.banner3-left {background-size:100% 100%,180% auto;}
.banner3-right { top:20%;}
#banner3 .banner1-right { top:12%;}

.banner1-right { top:12%;}
.banner2-left { background-size:100% 100%,250% auto;}

.banner2-left { background-size:100% 100%,135% auto;}

}

@media only screen and ( max-width:360px) {	
.banner1-right { top:5%;}
.banner2-left { background-size:100% 100%,cover;}
.banner4-left {background-size:100% 100%,170% auto; background-position:left 50% bottom 100%;}

}