/* banner styles - last edited on 08-17-18
----------------------------------------------- */

#banner { background: #f1eff2 url(../css-images/NEW-HEADER.jpg) no-repeat 0 0; 
  -webkit-background-size: contain;  
     -moz-background-size: contain;
       -o-background-size: contain; 
          background-size: contain;
text-align: left; max-height: 400px; height: 400px; width: 100%; max-width: 1140px; float: right; clear: none; margin: 0; padding: 0; position: relative; z-index: 1; overflow: hidden; }

#banner header { color: #fff; padding-top: 225px; padding-left: 110px; position: relative; z-index: 10; }
#banner header h1 { color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 90px; line-height: 0.875em; letter-spacing: -0.031em; font-weight: 900; text-transform: uppercase;  }
#banner header h1.two-lines { margin-top: -0.225em; }

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

@media only screen and (max-width: 1470px) {
#banner { width: 100%; max-width: 1140px; height: 0px; padding-top: 35.087719%; padding-bottom: 0px; float: left; }
#banner header { padding-top: 0px; margin-top: -175px; }

}

@media only screen and (max-width: 1400px) {
#banner header h1 { font-size: 85px; }
	
}

@media only screen and (max-width: 1360px) {
#banner header { padding-top: 0px; margin-top: -165px; }	
#banner header h1 { font-size: 80px; }
	
}

@media only screen and (max-width: 1290px) {
#banner header { padding-left: 80px; margin-top: -160px; }
#banner header h1 { font-size: 75px; }

}

@media only screen and (max-width: 1140px) {
#banner header h1 { font-size: 72px; }

}

@media only screen and (max-width: 1100px) {
#banner header { padding-left: 70px; }	
#banner header h1 { font-size: 70px; }

}

@media only screen and (max-width: 1040px) {
#banner header { margin-top: -190px; }
#banner header h1 { max-width: 90%; }

#banner header h1.two-lines { margin-top: 0.50em; }

}


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

}

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

}


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

}


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

#banner { background: #f1eff2 url(../css-images/NEW-HEADER-920.jpg) no-repeat 0 0; 
  -webkit-background-size: contain;  
     -moz-background-size: contain;
       -o-background-size: contain; 
          background-size: contain;
					overflow: hidden; }

#banner header { padding-left: 35px; margin-top: -135px; }
#banner header h1.two-lines { margin-top: -0.225em; }

}


@media only screen and (max-width: 780px) {
#banner header h1 { font-size: 68px; }

}

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

}

@media only screen and (max-width: 740px) {
#banner header { margin-top: -120px; }
#banner header h1 { font-size: 60px; }
 
}


@media only screen and (max-width: 640px) {  
#banner header { margin-top: -100px; }
#banner header h1 { font-size: 54px; }

}

@media only screen and (max-width: 570px) {
	
#banner { background: #f1eff2 url(../css-images/NEW-HEADER-570.jpg) no-repeat 0 0;  
  -webkit-background-size: contain;  
     -moz-background-size: contain;
       -o-background-size: contain; 
          background-size: contain;
										
					padding-top: 36.842105263158%;
										
					}

#banner header { padding-left: 20px; margin-top: -90px; }
#banner header h1 { font-size: 50px; }
 
}

@media only screen and (max-width: 540px) {
#banner header { margin-top: -80px; }	
#banner header h1 { font-size: 42px; } 

}

@media only screen and (max-width: 450px) { 
#banner header { margin-top: -70px; }	
#banner header h1 { font-size: 38px; } 

}

@media only screen and (max-width: 429px) { 
#banner header { margin-top: -65px; }	
#banner header h1 { font-size: 36px; }

}

@media only screen and (max-width: 400px) { 
#banner header { margin-top: -60px; }	
#banner header h1 { font-size: 32px; } 

}


@media only screen and (max-width: 400px) { 
#banner header { margin-top: -57px; }	
#banner header h1 { font-size: 30px; } 

}




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