/* banner styles - last edited on 05-26-20 
----------------------------------------------- */

#banner { background-color: #000; text-align: center; max-height: 295px; height: auto; width: 100%; /* min-width: 1200px; */ float: left; clear: both; margin: 0; padding: 0; position: relative; z-index: 1; overflow: hidden; }

#banner.l2, #banner.l3 { max-height: 150px; display: block !important; /* border-bottom: solid #e3e4e6 8px; */ }

.swiper-container { text-align: center; width: 100%; max-height: 295px; float: left; height: auto !important; min-height: 100% !important; }

.swiper-slide { background-color: #000; width: 100%; max-height: 295px; float: left; height: auto !important; min-height: 100% !important; }
.swiper-slide a { border: none; }

.swiper-slide img { width: 100%; height: auto; max-width: 1200px; max-height: 295px; clear: both; }
.swiper-slide img.mobile { display: none; position: absolute; margin-top: -1000px; }

.slides  { color: #fff; text-align: center; /* height: 500px; */ height: auto; width: 100%; }
.slides h1, .slides h2 { }

.slides h2 { }
.slides h1, .slides h2.heading {  }


/* #banner.l2 .slides { display: none; } */
#banner.l2 .slides { height: auto !important; width: 100%; margin: 0px !important; padding: 0px !important; }
#banner.l2 .slides img { width: 100%; } 

#banner.l2 .slides div.home { }
#banner.l2 .slides div.home h1 {  }

#banner.l2 .slides a:link, #banner.l2 .slides a:visited { }
#banner.l2 .slides a:hover, #banner.l2 .slides a:active { }

#banner.l2 .swiper-container { max-height: 150px !important; padding: 0px; }
#banner.l2 .swiper-container .swiper-slide, #banner.l3 .swiper-container .swiper-slide { background-color: #000;; max-height: 150px; width: auto; margin: 0 auto !important; padding: 0; display: block; float: none !important; }
#banner.l2 .swiper-container .swiper-slide img, #banner.l3 .swiper-container .swiper-slide, #banner.l3 .swiper-container .swiper-slide img { max-height: 150px; width: auto; margin: 0 auto !important; padding: 0; display: block; float: none !important; }

#banner.l2 .swiper-container .swiper-slide header, #banner.l3 .swiper-container .swiper-slide header { }
#banner.l2 .swiper-container .swiper-slide header, #banner.l3 .swiper-container .swiper-slide header { max-width: 1200px; margin: 0px auto 0px auto; clear: none; }
#banner.l2 .swiper-container .swiper-slide header h1, #banner.l3 .swiper-container .swiper-slide header h1 { 
color: rgba(255,255,255,0.65); font-family: 'Roboto', sans-serif; font-size: 62px; font-weight: 300; /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85); */ position: absolute; padding: 58px 0 0 13px; margin: 0; opacity: 0.65; text-transform: uppercase; }

#banner.l2 img.desktop-img { display: block !important; }
#banner.l2 img.mobile-img { display: none !important; }

/* pagination items */
.pagination { position: absolute; z-index: 19 !important; right: 26%; left: 25%; bottom: 0px;  }
.swiper-pagination-switch { background: url(../css-images/pagination.png) 0 0;
      -webkit-background-size: 16px 48px;  
     	-moz-background-size: 16px 48px;
     	-o-background-size: 16px 48px; 
      	background-size: 16px 48px;
      
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
       border-radius: 16px;
display: inline-block; width: 16px; height: 16px; margin-right: 3px; 
opacity: 0.8; cursor: pointer; z-index: 19 !important; }

.swiper-pagination-switch:hover { background-position: 0 -32px; }
.swiper-visible-switch { background-position: 0 -32px; }
.swiper-active-switch  { background-position: 0 -16px; }

.banner-nav { width: 100%; text-align: center; display: block; margin: 0 auto; position: absolute; bottom: 35px; }
.banner-nav ul { margin: 0 auto; padding: 0; text-align: center; }
.banner-nav ul li { color: #fff; display: inline-block; text-align: center; margin: 10px 2.0%; }
.banner-nav ul li a { background-color: rgba(0,0,0,0.35); color: #fff; font-size: 20px; font-weight: 700; text-transform: uppercase; white-space: nowrap; display: block; padding: 15px 25px; border: solid 1px #fff; }
.banner-nav ul li a:hover { text-decoration: none; background-color: rgba(0,0,0,0.75); }

/*
Responsive ----------------------------------- */

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

#banner { width: 100%; min-width: 100%; /* background-color: transparent !important; */ }
#banner, .swiper-container, .swiper-slide { /* background-color: transparent !important; */ }
	
#banner .swiper-container .swiper-wrapper { height: 0px !important; padding-bottom: 24.58333333333333%; }
.swiper-slide img { width: 100%; height: auto; }
.pagination { bottom: 0%; }

#banner.l2, #banner.l3, #banner.l2 .slides, #banner.l3 .slides { background-color: transparent !important; }
#banner.l2 .swiper-slide, #banner.l3 .swiper-slide { background-color: transparent !important; }  
#banner.l2 .slides img, #banner.l3 .slides img { height: auto; width: auto; margin-bottom: 0px; }

}

@media only screen and (max-width: 1200px) {
#banner.l2 .swiper-container .swiper-slide header, #banner.l3 .swiper-container .swiper-slide header { width: 96%; padding: 0 2%; }
#banner.l2 .swiper-container .swiper-slide header h1, #banner.l3 .swiper-container .swiper-slide header h1 { padding-left: 0; z-index: 10; text-align: left; white-space: nowrap; }


@media only screen and (max-width: 1010px) {
	
#banner .swiper-container .swiper-wrapper { padding-bottom: 25.5%; }
#banner, .swiper-container, .swiper-slide { }
.swiper-slide img { width: 100%; height: auto; }

.pagination { }

}

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

#banner.l2, #banner.l3 { overflow-x: hidden; }
#banner.l2 .swiper-container .swiper-wrapper img, #banner.l3 .swiper-container .swiper-wrapper img { position: absolute; right: -22% }

}

@media only screen and (max-width: 820px) {
#banner.l2 img.desktop-img { display: none !important; }
#banner.l2 img.mobile-img { display: block !important; }	
}


@media only screen and (max-width: 780px) {
#banner.l2 .swiper-container .swiper-wrapper img, #banner.l3 .swiper-container .swiper-wrapper img { right: -24.5% }

}

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

}


@media only screen and (max-width: 684px) {
#banner.l2 { margin: -10px 0 0 0 !important; position: relative; z-index: 10; }

}

@media only screen and (max-width: 640px) {
#banner.l2 .swiper-container .swiper-slide header h1, #banner.l3 .swiper-container .swiper-slide header h1 { font-size: 30px !important; }
.pagination { }
}

@media only screen and (max-width: 530px) {
#banner .swiper-container .swiper-wrapper { min-height: 137px; padding-top: 0px; padding-bottom: 0px; }
#banner, .swiper-container, .swiper-slide { }
#banner .swiper-container .swiper-slide img { min-height: 137px; width: 530px; min-width: 530px; }

#banner.l2 .swiper-container .swiper-wrapper img, #banner.l3 .swiper-container .swiper-wrapper img { left: -90%; }

}

@media only screen and (max-width: 520px) {
#banner.l2 .swiper-container .swiper-slide header h1, #banner.l3 .swiper-container .swiper-slide header h1 { padding-top: 59px; font-size: 29px !important; }

}

@media only screen and (max-width: 470px) { 
#banner.l2 .swiper-container .swiper-slide header h1, #banner.l3 .swiper-container .swiper-slide header h1 { padding-top: 60px; font-size: 27px !important; }

}

@media only screen and (max-width: 369px) { 
#banner.l2 .swiper-container .swiper-slide header h1, #banner.l3 .swiper-container .swiper-slide header h1 { padding-top: 62px; font-size: 24px !important; }

}

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


}




/*
END ----------------------------------- */