/*--------------------------------------------------------------
>>> Banner styles, last editted on 4-11-24
---------------------------------------------------------------- */

#banner header { width: 100%; padding-left: 0; position: absolute; z-index: 10; text-align: center; margin-top: 115px; }
#banner header .header-wrap { text-align: left; margin: auto; max-width: 1100px; padding: 0; }

#banner header h1.banner-heading { color: #fff; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 82px; line-height: 1.25em; text-align: left; text-shadow: 0px 0px 4px rgba(0,0,0,0.9); } 
#banner header p.banner-copy { font-size: 24px; padding: 1.0em 0; }

#banner { 
	background-color: #000; 
	background-image: url(../images/landing-banner-bg.jpg);
	background-size: 100% auto;	
	background-position: center top;
	background-repeat: no-repeat;	
	display: block; text-align: left; height: 667px; width: 100%; clear: both; margin: 0; /* padding-bottom: 37.5%; */ position: relative; z-index: 1; overflow: hidden; 
}

#banner:before,
#banner:after { content: " "; width: 100%; display: table; }

/* Case Study Swipers */
#banner-swiper { display: block; text-align: left; width: 100%; clear: both; margin: 0; padding: 40px 0; position: relative; z-index: 1; overflow: hidden; } 
#banner-swiper:before,
#banner-swiper:after { content: " "; width: 100%; display: table; }
 
.swiper-container { text-align: center; float: left; width: 100%; margin: auto; }
.swiper-container-no-swipe { text-align: center; width: 100%; float: left; height: auto !important; min-height: 100% !important; }

.swiper-slide { width: 100%; float: left; height: auto; }
#banner-swiper .swiper-slide { width: 100%; float: left; height: auto; }
#banner-swiper .swiper-container { height: 100%; }

.swiper-slide a { border: none; }

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

.slides  { color: #fff; text-align: center; height: auto; width: 100%; }

/* pagination items */
.pagination { position: absolute; z-index: 19 !important; right: 26%; left: 25%; bottom: 15px;  }
.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; } 

/* Responsive
---------------------------------------------------------------- */
@media only screen and (max-width: 1440px) {
#banner header h1.banner-heading { font-size: 76px; }
}

@media only screen and (max-width: 1320px) {
#banner header h1.banner-heading { font-size: 72px; }
}
	
@media only screen and (max-width: 1200px) {
#banner header { width: auto; padding-left: 0; position: relative; z-index: 10; margin-top: 160px; } 
}

@media only screen and (max-width: 1160px) {
#banner header { padding-right: 30px; padding-left: 30px; } 
}

@media only screen and (max-width: 1080px) {
#banner header h1.banner-heading { font-size: 70px; } 	
#banner { height: 620px; }
}

@media only screen and (max-width: 1024px) {
#banner { height: 600px; }
}
	
@media only screen and (max-width: 980px) {
#banner header h1.banner-heading { font-size: 68px; } 
}

@media only screen and (max-width: 920px) {
#banner { height: 580px; }	
#banner header h1.banner-heading { font-size: 65px; } 
}

@media only screen and (max-width: 880px) {
#banner { height: 560px; }	
#banner header h1.banner-heading { font-size: 55px; }     
}

@media only screen and (max-width: 720px) {
#banner { height: 540px; }		
#banner header h1.banner-heading { font-size: 50px; }     
}

@media only screen and (max-width: 680px) {
#banner { height: 520px; }	
#banner header h1.banner-heading { font-size: 45px; } 
#banner header p.banner-copy { font-size: 22px !important; }		
}

@media only screen and (max-width: 640px) {    
#banner header p.banner-copy { font-size: 22px !important; }	
}

@media only screen and (max-width: 580px) {
#banner { height: 500px; }		
#banner header h1.banner-heading { font-size: 40px; } 	
}

@media only screen and (max-width: 560px) {    
#banner { height: 480px; }	
#banner header { margin-top: 150px; }	
#banner header h1.banner-heading { font-size: 35px; } 
#banner header p.banner-copy { font-size: 21px !important; }	
}

@media only screen and (max-width: 480px) {
#banner { }
#banner header { margin-top: 145px; }	
#banner header h1.banner-heading { font-size: 32px; } 	
#banner header p.banner-copy { font-size: 19px !important; }	
}

@media only screen and (max-width: 420px) {
#banner { }
#banner header { margin-top: 140px; }	
#banner header h1.banner-heading { font-size: 31px; } 	
#banner header p.banner-copy { font-size: 19px !important; }
}

@media only screen and (max-width: 370px) {
#banner { }
#banner header { margin-top: 135px; }	
#banner header h1.banner-heading { font-size: 28px; } 	
#banner header p.banner-copy { font-size: 18px !important; }	
}


@media only screen and (max-width: 320px) {
#banner { min-width: 320px; text-align: center; }	
}


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