#banner1 { float:left; width:100%; background:#005ba3;}
.banner1-left {
float:left; width:50%;margin:0; height:520px;
background:url('../images/midpage-banner1.png');
background-repeat: no-repeat;
background-size:cover;
background-position:left 0% bottom 80%;}

.banner1-right { float:right; width:50%; padding:100px;}
.banner1-right h2 {color:#fff; font-size:50px; line-height:60px;}
.banner1-right p { color:#fff; line-height:28px; font-size:19px; font-weight:normal;}

.banner1-right .btn { float:left; width:100%; margin:0px;}
.banner1-right .btn a { background:#fff; margin:25px 0 0; display:inline-block; padding:10px 30px; border-radius:8px; color:#005ba3; font-size:18px;}
.banner1-right .btn a:hover { background:#ff5e01; color:#fff;}

#banner2 { float:left; width:100%; background:#005ba3;}

.banner2-left {
float:left; width:50%;margin:0; height:520px;
background:url('../images/midpage-banner2.png');
background-repeat: no-repeat;
background-size:cover;
background-position:left 0% bottom 80%;}

#banner3 { float:left; width:100%; background:#005ba3;}

.banner3-left {
float:left; width:50%;margin:0; height:520px;
background:url('../images/midpage-banner3.png');
background-repeat: no-repeat;
background-size:cover;
background-position:left 0% bottom 60%;}

#banner4 { float:left; width:100%; background:#005ba3;}

.banner4-left {
float:left; width:50%;margin:0; height:520px;
background:url('../images/midpage-banner4.png');
background-repeat: no-repeat;
background-size:cover;
background-position:left 0% bottom 30%;}


@media only screen and ( max-width:1800px) {
.banner1-left { background-size:cover; background-position:right 0 bottom 0;}
}

@media only screen and ( max-width:1640px) {
.banner3-left { background-size:cover; background-position:left 30% bottom 100%;}
.banner4-left { background-size:cover; 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:110px;}
.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,#banner5 { position:relative;}
.banner1-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner1.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,cover;
background-position:top 0 left 0,right 0% bottom 0%;}

.banner2-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner2.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-banner3.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,cover;
background-position:top 0 left 0,left 50% bottom 60%;}

.banner4-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/midpage-banner4.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,cover;
background-position:top 0 left 0,left 0% bottom 60%;}

#banner3 .banner1-right { padding:15px;}
#banner4 .banner1-right  { padding:15px;}

.banner1-right,.banner2-right,.banner3-right,.banner4-right{ padding:0px; width:100%; text-align:center; position:absolute; top:30%; background:none; padding:15px;}
}
@media only screen and ( max-width:980px) {
.banner1-right h2 { color: #fff; font-size: 40px; line-height:40px;}
.banner1-right p {padding: 0 30px;}
}

@media only screen and ( max-width:767px) {
.banner4-left {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 { background-position:top 0 left 0,left 0% bottom 70%;}
.banner1-right h2 { color: #fff; font-size: 35px; line-height:30px;}

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

@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  {background-position:top 0 left 0,left 0% bottom 70%;}

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

.banner1-right { top:15%;}
.banner1-right h2 { font-size:22px;}
.banner1-right p { font-size:16px;}
}

@media only screen and ( max-width:460px) {	
.banner1-right h2 { font-size:18px; line-height:24px;}
.banner1-right p { font-size: 14px; line-height:22px;}

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



.banner1-right { top:9%;}
.banner3-right { top:9%;}

.banner1-right h2 { color: #fff; font-size: 25px; line-height:32px;}

}

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