#banner1 { float:left; width:100%; background:#00569c;}
.banner1-left {
float:left; width:50%;margin:0; height:510px;
background:url('../images/mid-page-banner1.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 80%;}

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

.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:#00aeef; font-size:18px;}
.banner1-right .btn a:hover { background:#00aeef; color:#fff;}

#banner2 { float:left; width:100%; background:#00569c;}
.banner2-left {
float:left; width:50%;margin:0; height:510px;
background:url('../images/mid-page-banner2.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 80%;}

#banner3 { float:left; width:100%; background:#00569c;}
.banner3-left {
float:left; width:50%;margin:0; height:510px;
background:url('../images/mid-page-banner3.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 60%;}

#banner4 { float:left; width:100%; background:#00569c;}
.banner4-left {
float:left; width:50%;margin:0; height:510px;
background:url('../images/mid-page-banner4.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 30%;}

#banner5 { float:left; width:100%; background:#00569c;}
.banner5-left {
float:left; width:50%;margin:0; height:510px;
background:url('../images/mid-page-banner5.png');
background-repeat: no-repeat;
background-size:100% auto;
background-position:left 0% bottom 80%;}

@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/mid-page-banner1.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,150% auto;
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/mid-page-banner2.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/mid-page-banner3.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,150% auto;
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/mid-page-banner4.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,100% auto;
background-position:top 0 left 0,left 0% bottom 60%;}

.banner5-left { width:100%;
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('../images/mid-page-banner5.png');
background-repeat: no-repeat,no-repeat;
background-size:100% 100%,150% auto;
background-position:top 0 left 0,left 30% bottom 60%;}

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

.banner1-right,.banner2-right,.banner3-right,.banner4-right,.banner5-right { padding:0px; width:100%; text-align:center; position:absolute; top:30%; background:none; 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,.banner5-left  {height:400px;}
.banner1-right,.banner2-right,.banner3-right,.banner4-right,.banner5-right  { 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,.banner5-left  {height:350px;}
.banner1-right,.banner2-right,.banner3-right,.banner4-right,.banner5-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:20px;}

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

.banner1-left {background-size: 100% 100%,200% auto;}
.banner2-left { background-size:100% 100%,165% auto;}
.banner3-left {background-size:100% 100%,210% auto;}
.banner5-left {background-size:100% 100%,210% auto;}

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

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

.banner4-left {background-size:100% 100%,170% auto; background-position:left 50% bottom 100%;}
}