/*COLORS
`	BLUE - nav, olb background, buttons background: #394156;
	RED - H3: #A82A1B;
	GREY: #394156;
*/

/*RESETS*/
html,body{
    margin: 0;
    padding:  0;
}
body{
   font-size: 16px; /*Base font here*/ 
   font-family: Arial, Helvetica, sans-serif;
}
img{
    border: none;
    display:  block;
}
*{ box-sizing: border-box;}
 div.open,nav.open{display: block;}

/*LAYOUT CLASSES*/
.vh{  
	border: 0;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
}
.cf{
    clear: both;
}
.cf:after{
    content: "";
    display: table;
    clear: both;
}
.contain{
    width: 1500px;/*Change container width here*/
    margin-left: auto;
    margin-right: auto;
}
.contain:after{
    content: "";
    display: table;
    clear: both;
}

ul.navList{
     padding: 0;
     margin: 0;
     list-style: none;
}
     ul.navList li a{
             text-decoration:  none;
        }
.inside{
    padding: 1em;   
}

/*MAIN LAYOUT*/
#header_bg{
	background-color: #EEE; 
	box-shadow: inset 0 0 20px rgba(0,0,0,0.25);
}
	header{
	}
	.tagline{
		font-size: 1.8em;
		font-style: italic;
		float: right;
		clear: right;
		font-weight:  bold;
		margin-right: 1em;
			
	}
	#logo{
		width: 50%; 
		float: left;	
	}
	 #olb{
            background-color: #394156;  
			width: 25%;
			float: right;
			border-radius:  0 0 2em 2em;
            color: #FFF;
			padding: 0.5em;
			text-align: center;
        }
		 #olb .olb_title{
			margin: 0; 
			font-weight: bold;
			font-size: 1.5em;
		 }
		 #olb iframe{
			 display: block;
			 margin: auto;
			 width: 90%;
		 }
		 #olb a{
			 color: #FFF;
			 text-decoration: none;
		 }
		.button {
			background: #EC0409;
			border: solid .0625em #FFF;
			border-radius: .5em;
			box-shadow: 2px 2px 5px 2px #333;
			margin: 10px;
			padding: .25em;
		}
		.button:hover {
			box-shadow: 0 0 0 0 #394156;
		}
  #loginBtn,#menuBtn {
	  display: none;
	  color: #FFF;
	  padding: 0.5em;
	  font-weight: bold;
	  text-align: center;
	  font-size: 1.2em;
	  float: left;
	  cursor: pointer;
  }
  #menuBtn {
	  background-color: #394156;
  }
  #loginBtn {
	  background-color: #A82A1B;
	  border-right: 3px #0F234C solid;
  }
  #loginCancel {
		  background-color: #A82A1B;
		  display: none;
		  padding: 0.5em;
		  text-align: center;
		  cursor: pointer;
		  width: 80%;
		  margin: auto;
		  font-weight: bold;
		  color: #FFF;
	}
#navBg {
	background-color: #394156; 
}
nav {
	}
	nav ul{
	}
		nav ul li{
/*			width: 14%;*/
			float: left;
			padding-left: 13px;
		}
			nav ul li a{
				display: block;
				padding: 0.5em; 
				color: #FFF;
				text-align: center;
				font-weight: bold;
				font-size: 1.4em;
			}
#main {
    clear: both;
}
    #banner {
		clear: both;	
	}
    #mainContent {
    }
		#mainContent .inside {
			background-color: #EEE;
		}
			#mainContent .inside h1 {
				text-decoration: underline;
			}
			#mainContent .inside h2 {
				margin-bottom: 0;
			}
			#mainContent .inside h3 {
				color: #A82A1B;
			}
			#mainContent .inside .committees {
				float: left;
				width: 25%
			}
			#mainContent .inside .map {
				float: left;
			}
			#mainContent .inside .visa {
				margin: 0 auto;
				width: 75%;
			}
				#mainContent .inside .visa .pageHeader img {
					margin: 0 auto;
				}
				#mainContent .inside .visa .float {
					float: left;
				}
					#mainContent .inside .visa .float img {
						padding-right: 5%;
					}
				#mainContent .inside .visa .ezCard {
					padding-top: 3em;
					width: 75%;
				}
				#mainContent .inside .visa .verifiedByVisa {
					padding-top: 2em;
				}
				#mainContent .inside .visa h2 {
					color: #000B74;
					font-size: 1.5em;
					padding-top: 2em;
				}
				#mainContent .inside .visa .cardPhoneNumbers {
					margin: 0 auto;
					width: 25%;
				}
				#mainContent .inside .visa .cardPhoneNumbers p {
					margin: 0 5% 1.5em;
				}
			#mainContent .phone table {
				border-collapse: collapse;
			}
				#mainContent .aRow {
					background: #FFF;
				}
				#mainContent .phone td {
					padding: .25em 0;
				}
					#mainContent .phone td:first-child {
						width: 75%
					}
					#mainContent .phone td:last-child {
						text-align: right;
					}
			#mainContent .hours article {
				float: left;
				/*width: 25%;*/
				 width:  33%
			}
			#mainContent .locations article {
				float: left;
				width: 50%;
			}
				#mainContent .inside .locations h3 {
					clear: both;
				}
			#mainContent #buttons a,
			.ratesButton {
				background: #394156;
				border: .0625em solid #394156;
				border-radius: .5em;
				color: #FFF;
				font-size: 1.5 em;
				font-weight: bold;
				margin-right: .625em;
				padding: .25em;
				text-decoration: none;
			}
				#mainContent #buttons a:hover,
				.ratesButton:hover {
					background: #A82A1B;
					border: .0625em solid #A82A1B;
				}
			#mainContent .inside .discounts {
				border-bottom: solid 1px #394156;
				margin: 0 auto;
				text-align: center;
				width: 75%;
			}
				#mainContent .inside .discounts:last-child {
					border-bottom: none;
				}
			#mainContent .inside .discounts img {
				margin: 0 auto;
			}
/* =======
	RATES
   ======= */

			.rates_aRow {
				background: #CCC;
			}
			.rates_subHeader {
				font-weight: bold;
			}
			.notes {
				font-size: .625em;
				font-style: italic;
			}
	.bold {
		font-weight: bold;
	}
	.red {
		color: #A82A1B;
	}
#btmBoxesBg{
	background-color: #A82A1B;
}
#btmBoxes{
	color: #FFF;
}
    #btmBoxes .box{
        float: left;
		width: 19%;
		text-align: center;
		border-right: 1px #ED9B92 solid;
		
    }
	#btmBoxes .box small{
		font-size: 0.60em;
	}
		#btmBoxes .box:first-child{
			width: 24%;
			padding: 1em 0 0 1em;
		}
		#btmBoxes .box:first-child,#btmBoxes .box:last-child{
			border: none;	
		}
		#btmBoxes .box:first-child a{
			display: block;
			background-color: #394156;
			color: #FFF;
			border: 1px solid #FFF;
			padding: 1em;
			margin: 0.5em 0;
			text-decoration: none;
			text-align: center;
			width: 80%;
		}
        #btmBoxes .box h3{
             margin-bottom: 0;
			 font-size: 1.5em;
        }
		 #btmBoxes .box span{
             font-size: 3em;
			 display: block;
        }
	#linkBoxes {
	}
		#linkBoxes .box{
			border: 3px #A82A1B solid;	
			width: 45%;
			margin: 1em 4% 1em 1%;
			float: left;
			border-radius: 20px;
			overflow: hidden;
			position: relative;
			min-height: 200px;
		}
		#linkBoxes .box:nth-child(2){
			border: 3px #394156 solid;
			}
			#linkBoxes .box:nth-child(2) h4{
				background-color: #394156;
			}
		#linkBoxes .box:nth-child(3){
			border: 3px #3A4257 solid;
			}
			#linkBoxes .box:nth-child(3) h4{
				background-color: #3A4257;
			}
			
		#linkBoxes .box:nth-child(4){
			border: 3px #000000 solid;
			}
			#linkBoxes .box:nth-child(4) h4{
				background-color: #000000;
			}
			#linkBoxes .box h4{
				width: 25%;
				background-color: #A82A1B;
				border-radius: 50%;
				color: #FFF;
				font-weight: normal;
				font-size: 1.5em;
				position: absolute;
				height: 110%;
				margin: 0;
				left: -20%;
				top: -5%;
				text-align: right;
				padding: 2em 15% 25% 22%
			}
			#linkBoxes .box h4 span{
				font-size: 2em;
				padding: 0.3em 0.1em;
			}
				#linkBoxes ul{
					width: 75%;
					float: right;	
					padding: 1em 0 0 1em;
					font-size: 1.25em;
				}
					#linkBoxes ul li{
						float: left;
						width: 50%;
						padding: 0.5em 0;
					}
						#linkBoxes ul li a{
							color: 	#A82A1B;
						}
#footer_bg{
	overflow: hidden;	
}
footer{
	background-color: #8F8584;
    border-radius: 0 0 40% 40%;
    color: #fff;
    margin-left: -10%;
    min-height: 200px;
    width: 120%;
	color: #000;
	font-weight: bold;
}
footer .contain {
    padding: 1em 0 3em;
    width: 80%;
	text-align: center;
}
	#NCUA, #EHO{
		width: 50%;
		float: left;	
	}
		#NCUA img{
			display: block;
			margin: auto;	
		}
		.NCUA_logo,.NCUA_text{
			float: left;	
			text-align: center;
			padding: 0.5em;
		}
		
		.NCUA_logo{
			width: 50%;
		}
		.NCUA_text{
			width: 50%;
		}
		#NCUA a{
			color:#ffffff;
		}
	#EHO{
		padding: 1em;
	}
		#EHO img{
			float: right;	
		}
footer a, #logos a, .routingNumber{
	font-size: 1.5em;
	font-weight: bold;
	color: #A82A1B;
	padding: 1em 0 ;
}
.routingNumber{
	color:#ffffff;
}
#logos a{
	float: left;	
	padding: 1em;
}

	/****************/
	/*****RATES******/
	/****************/
		#rates_container{
			
		}
		.rates_effective{
			clear: both;	
		}
		.rates_nav{
			clear: both;	
		}
		.rates_button{
			margin-right: 10px;
		}
		.rates_table{
			width: 100%;
			border-collapse: collapse;
		}
		.rates_header{
	        font-size: 1.5em;
			font-weight: bold;

		}
		.rates_title{
			font-weight: bold;
		}
		.rates_bold{
			font-weight: bold;
		}
		.rates_notes{
			font-size: 0.75em;
			font-style: italic;
		}
		.rates_subheader{
		}
		.rates_linespace{
		}
		.rates_aRow{
		}
		.rates_standard{
			
		}
	/****************/
	/******News******/
	/****************/
		.news_title{
			font-weight: bold;
			margin: 1em 0;	
		}
		.news_title p{
			margin: 0;	
			display: inline;
		}
		.news_details{
			
		}
	/***********************/
	/******Calculators******/
	/***********************/
	#calculators a{
		display: block; 
		background-color: #02337B;
		font-weight: bold;
		color: #FFF;
		margin:2px;
		padding:1%;
		float: left;
		width: 32.5%;
		border-radius: 4px;
		font-size: 1.1em;
		text-decoration: none;
	 }
	 #calculators a:hover{
		 background-color: #235F9B;
	 }
	 #calculators strong{
		display: block;
		clear: both;
		padding:5px;
		font-size: 1.25em;
		margin-top: 16px;
	 }
	 .calculatorSection{
		width: 100%;
		float: left;
		margin: 5px;
	 }
	 #prsnpl a{ width: 49%;}
	 #lease  a{}
	 #prsnfi a{ width: 100%;}
	 #retire a{ width: 100%;}
	 #invest a{ width: 49%;}
	 #home   a{ width: 100%;}
	 
	 #prsnpl {}
	 #lease  {}
	 #prsnfi {}
	 #retire {}
	 #invest {}
	 #home   {}
	
	 #prsnpl strong{}
	 #lease  strong{}
	 #prsnfi strong{}
	 #retire strong{}
	 #invest strong{}
	 #home   strong{}
	 
/********************************/
/*******3rd PARTY LEAVING********/
/********************************/


        	/********************************/
            /*******3rd PARTY LEAVING********/
            /********************************/
            
                #extDis {
                    display: none;
                    position: fixed;
                    width: 100%;
                    height: 100%;
                    top: 0px;
                    left: 0px;
                    z-index: 1000;
                }
                #extDis h2{
                    text-align: center;
                }
                
                #extDis .extDisMsg {
                    background-color: #102E56;
                    border: 5px solid #FFF;
                    border-radius: 10px;
                    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
                    color: #FFF;
                    margin: 3em auto;
                    padding: 2em;
                    position: relative;
                    text-align: left;
                    width: 80%;
                    font-size: 0.80em;
                }
                #extDis .extDisMsg p{
                    padding: 0 0 20px 0;
                }
                #extDis .extDisBg {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
                }
            
                #extDis a.continueBtn:hover,#extDis a.continueBtn:focus,#extDis a.closeBtn:focus {
                    background-color: #FAE752;
                    color:#000;
                    
                }
                #extDis a.closeBtn, #extDis a.continueBtn {
                    background-color: #FFF;
                    color: #381404;
                    display: inline;
                    font-weight: bold;
                    margin: 10px 20px 0px 0px;
                    padding: 10px 20px;
                    border-radius: 10px;
                    cursor: pointer;
                    text-decoration: none;
                }

/*

	#extDis {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: 1000;
	}
	#extDis h2{
		text-align: center;
	}
	
	#extDis .extDisMsg {
		background-color: #A82A1B;
		border: 5px solid #FFF;
		border-radius: 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
		color: #FFF;
		margin: 3em auto;
		padding: 2em;
		position: relative;
		text-align: left;
		width: 80%;
		font-size: 0.80em;
	}
	#extDis .extDisMsg p{
		padding: 0 0 20px 0;
	}
	#extDis .extDisBg {
		position: absolute;
		width: 100%;
		height: 100%;
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	}

	#extDis a.continueBtn:hover {
		text-decoration: none;
	}
	#extDis .closeBtn, #extDis a.continueBtn {
		background-color: #FFF;
		color: #381404;
		display: inline;
		font-weight: bold;
		margin: 10px 20px 0px 0px;
		padding: 10px 20px;
		border-radius: 10px;
		cursor: pointer;
		text-decoration: none;
	}*/
	/********************************/
	/************BACK TO TOP********/
	/********************************/
	#btt{
		background-color: #EC0409;
		border-radius: 5px;
		bottom: 8em;
		color: white;
		display: none;
		font-size: 0.75em;
		opacity: 0.6;
		padding: 0.5em;
		position: fixed;
		right: 2em;
		text-align: center;
		cursor: pointer;
		z-index: 30;
	}

.paymentButton img{
	float: right;
    width: auto;
    height: auto;
    max-height: 200px;
    max-width: 200px;
    margin-top: -20px;
    margin-right: 25px;
}