/*--------------------------------------------------------------
>>> Banner styles, last editted on 05-28-26 
---------------------------------------------------------------- */
/* Version: 1.4.3 ----- */ 

#banner { background-color: rgba(70,82,104,0.30); /* #465268 @ 30% */ 

/* background-image: url(images/spacer.gif);
	    background-repeat: no-repeat; 
  -webkit-background-size: 100% auto;  
	 -moz-background-size: 100% auto; 
	   -o-background-size: 100% auto;
	      background-size: 100% auto;
	  background-position: center center;  */
	display: block; min-width: 100%; height: auto; margin: 0; overflow: hidden; /* padding-bottom: 37.5%; */ 
    border-bottom: solid 1px #2e4167;
}

#banner.about,
#banner.legal,
#banner.l2 { height: 275px; 
		 background-image: url("images/l2-banner-bg.jpg"); 
		background-repeat: no-repeat; 
  -webkit-background-size: 100% auto;  
	 -moz-background-size: 100% auto; 
	   -o-background-size: 100% auto;
	      background-size: 100% auto;
	  background-position: center center;
}

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

#banner .underimage { position: relative; z-index: 1; opacity: 1.0; margin-bottom: -10px !important; }

#banner .banner-wrap { 
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;
	width: 100%; max-width: 1240px; margin: 0 auto; height: 100%; max-height: 720px; overflow: hidden;
}

#banner header { position: absolute; z-index: 10; padding-top: 38.25%; max-width: 100%; }
#banner header.header-wrap { text-align: left; margin: auto 0; width: calc(100% - 30px); padding-right: 15px; padding-left: 15px; max-width: 1080px; }

#banner header h1.banner-heading { color: #fff; font-family: 'proxima-nova', sans-serif; font-size: 49px; line-height: 1.375em; font-weight: 400; text-shadow: 1px 2px 4px rgba(0,0,0,0.80); } 
#banner header h1.banner-heading .caps { white-space: nowrap; }
#banner header h1.banner-heading .gray { white-space: nowrap; text-shadow: none; }

#banner.about header h1.banner-heading,
#banner.legal header h1.banner-heading,
#banner.terms header h1.banner-heading,
#banner.l2 header h1.banner-heading { color: #fff; font-size: 58px; text-shadow: 1px 2px 4px rgba(0,0,0,0.55); white-space: nowrap; } 

#banner .swiper-container { overflow: hidden; }

.swiper-container,  
.swiper-wrapper,   
.swiper-slide { display: block; min-width: 100%; height: 100%; margin: 0; overflow: hidden; }

.swiper-slide video { max-width: 100%; height: auto; position: relative; z-index: 1; }

#banner .swiper-slide::after {
  content: "";
  position: absolute;
  z-index: 5;	
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: calc(56.25% + 157px);	
  
  /* Adjust direction (to bottom) and opacity (0.45) as needed */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%); */
  background: linear-gradient(180deg, rgba(1, 25, 64, 0.75), rgba(0, 0, 0, 0));
  opacity: 0.99;
  pointer-events: none; /* Allows you to still click/interact with the image */
}

#banner.legal .swiper-slide::after,
#banner.l2 .swiper-slide::after { background: none !important; padding-bottom: 0; }

#banner.about header,
#banner.legal header,
#banner.terms header,
#banner.l2 header { position: relative; z-index: 10; padding-top: 0px; }

#banner.about header h1,
#banner.legal header h1,
#banner.terms header h1,
#banner.l2 header h1 { white-space: nowrap; }


#banner.l2 h1.l2-heading { text-shadow: 1px 2px 4px rgba(0,0,0,0.55); } 

#banner.l2 .page-title {
background-image: url(images/spacer.gif); 
	    background-repeat: no-repeat; 
  -webkit-background-size: auto 100%;  
	 -moz-background-size: auto 100%; 
	   -o-background-size: auto 100%;
	      background-size: auto 100%;
	  background-position: center center;
padding-right: 45px;
margin-right: -45px;
}


/* -- Fade-in/Fade-out Transitions -------- */
.img-container { position: relative; margin: 0; width: 100vw; /* height: 100vh; */ height: 0; 
				 overflow: hidden; /* padding-bottom: 30%; padding-bottom: 52.3157894736842%; */ padding-bottom: 60%; }
.img-container img {
	width: 100%; height: 100%; 
	object-fit: cover;
  	object-position: center;
  	opacity: 0;
  	position: absolute; top: 0; left: 0;  					
  	z-index: -1; 
}

.img-container img.next { opacity: 1; z-index: 1; }
.img-container img.prev { opacity: 1; z-index: 2; }
.img-container img.fade-out { opacity: 0; transition: visibility 0s .5s, opacity .5s linear; visibility: hidden; }

/* Banner L2  -------*/
#banner.l2 .swiper-slide { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
#banner.l2 .swiper-slide { /* padding-bottom: 17.3828125%; height: 0px; */ height: 180px; }

#banner.l2 .swiper-slide header { width: 100%; }

#banner.l2 .header-wrap { display: block; }
#banner.l2 .header-wrap h1.l2-heading { font-size: 34px; text-align: left !important; text-transform: uppercase; width: 100%; max-width: 1240px; margin-right: auto; margin-left: auto; } 

#banner.l2 .flex-center { display: flex; align-items: center; }


/* Banner Effects  -------*/
.fade-in {
  opacity: 1.0;
  animation-name: FadeIn;
  animation-delay: 0.5s;
  animation-duration: 5.0s; }
	
@keyframes FadeIn {
  0% {
    /* position: absolute;
    top: -3rem; */
    opacity: 0;
  }
  100% {
    opacity: 1.0;
  }
}

.slide-in {
  opacity: 1.0;
  animation-name: topFadeOut;
  animation-duration: 3.0s; }
	
@keyframes topFadeOut {
  0% {
    /* position: absolute;
    top: -3rem; */
    opacity: 0;
		transform: translateX(-400px);
  }
  100% {
    opacity: 1.0;
		transform: translateX(0px);
  }
}


/* Responsive
---------------------------------------------------------------- */
@media only screen and (max-width: 1380px) {
#banner header h1.banner-heading { font-size: 48px; } 
 
#banner.about header h1.banner-heading,
#banner.legal header h1.banner-heading,
#banner.terms header h1.banner-heading,
#banner.l2 header h1.banner-heading { font-size: 56px; }	
}

@media only screen and (max-width: 1240px) {
#banner header h1.banner-heading { font-size: 46px; } 
#banner.l2 header { }			
#banner.l2 .page-title { padding-right: 20px; margin-right: -20px; }
}

@media only screen and (max-width: 1180px) {
#banner.l2 .page-title { background-position: center center; padding-right: 0; margin-right: 0; }
}

@media only screen and (max-width: 1080px) { 
#banner.l2 .page-title { background-position: right -10px center; }		
}

@media only screen and (max-width: 1024px) { 
#banner header h1.banner-heading { font-size: 42px; }
#banner.about,
#banner.legal,
#banner.l2 { height: 250px; }		
#banner.about header h1.banner-heading,
#banner.legal header h1.banner-heading,
#banner.terms header h1.banner-heading,
#banner.l2 header h1.banner-heading { font-size: 42px; }
}

@media only screen and (max-width: 880px) {
#banner header h1.banner-heading { font-size: 36px; } 
#banner.about,
#banner.legal,
#banner.l2 { height: 225px; }		
#banner.l2 header h1.l2-heading  { font-size: 32px; }		
}

@media only screen and (max-width: 850px) { 
#banner header.header-wrap { /* width: 85%; */}	
}

@media only screen and (max-width: 830px) { 
#banner header h1.banner-heading { font-size: 32px; }	
}

@media only screen and (max-width: 825px) { 
#banner header.header-wrap { /* width: 80%; */ }	
}

@media only screen and (max-width: 780px) { 
#banner header.header-wrap { }
#banner.about,
#banner.legal,
#banner.l2 { height: 200px; }	
#banner.about header h1.banner-heading,
#banner.legal header h1.banner-heading,
#banner.terms header h1.banner-heading,
#banner.l2 header h1.banner-heading { /* font-size: 40px; */ }	
} 

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

@media only screen and (max-width: 680px) { 
#banner header.header-wrap {  }
#banner.about,
#banner.legal,
#banner.l2 { height: 175px; }	
}

@media only screen and (max-width: 640px) {  
#banner header h1.banner-heading { font-size: 27px; }	
#banner header.header-wrap { width: 100%; overflow: hidden; }	
}

@media only screen and (max-width: 620px) {
#banner.l2 .swiper-slide { padding-bottom: 0; width: 100%; height: 108px; }
#banner.l2 header h1.l2-heading  { font-size: 23px; }	
}


@media only screen and (max-width: 600px) {
#banner.about,
#banner.legal,
#banner.l2 { height: 160px; }		
.img-container { height: 100%; padding-bottom: 0; margin-left: 0px; margin-top: 0px; display: none; }
#banner.l2 header h1.l2-heading { font-size: 32px !important; padding-right: 15px; padding-left: 15px; }	
}

@media only screen and (max-width: 520px) {   
#banner.about,
#banner.legal,
#banner.l2 { 
  -webkit-background-size: 520px auto;  
	 -moz-background-size: 520px auto; 
	   -o-background-size: 520px auto;
	      background-size: 520px auto;
}	
#banner.l2 header h1.l2-heading { font-size: 30px !important; padding-right: 15px; padding-left: 15px; }	
}

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

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

@media only screen and (max-width: 430px) {
#banner header h1.banner-heading { font-size: 24px; }
#banner.about,
#banner.legal,
#banner.l2 { height: 150px; }		
	
#banner.l2 .page-title { background-image: none !important; }	
#banner.about header h1.banner-heading,
#banner.legal header h1.banner-heading,
#banner.terms header h1.banner-heading,
#banner.l2 header h1.banner-heading { font-size: 30px; }	
	
}

@media only screen and (max-width: 360px) {
#banner header h1.banner-heading { font-size: 21px; }
#banner.l2 header h1.l2-heading  { font-size: 21px; }

#banner.about,
#banner.legal,
#banner.l2 { height: 125px; }	
	
#banner.about header h1.banner-heading,
#banner.legal header h1.banner-heading,
#banner.terms header h1.banner-heading,
#banner.l2 header h1.banner-heading{ font-size: 29px; }		
}

@media only screen and (max-width: 359px) {
#banner.l2 header h1.l2-heading  { font-size: 21px; }	
}

@media only screen and (max-width: 320px) {
#banner { min-width: 320px; }	
#banner header.header-wrap { min-width: 305px; }	
}


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