/**************************************************/
/*                    WebFonts                    */
/**************************************************/
@font-face {
    font-family: 'LatoRegular';
    src: url('../../files/fonts/Lato/Lato-Reg-webfont.eot');
    src: url('../../files/fonts/Lato/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/fonts/Lato/Lato-Reg-webfont.woff') format('woff'),
         url('../../files/fonts/Lato/Lato-Reg-webfont.ttf') format('truetype'),
         url('../../files/fonts/Lato/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'LatoBold';
    src: url('../../files/fonts/Lato/Lato-Bol-webfont.eot');
    src: url('../../files/fonts/Lato/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/fonts/Lato/Lato-Bol-webfont.woff') format('woff'),
         url('../../files/fonts/Lato/Lato-Bol-webfont.ttf') format('truetype'),
         url('../../files/fonts/Lato/Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/**************************************************/
/*                     Layout                     */
/**************************************************/
body {
	background:url("body.png") 0 0   repeat-x #fff;
}
/*Contains all elements within the body*/
.wrapper {
	padding: 0px 1em;
}

/*Contain all data area items other than Transactions on Account Page*/
main > .grid {
	padding-top:56px;
}

/*Contains the Utility Navigation, Banner, and Primary Navigation*/
header {
	height:123px;
}

/*Banner*/
header div.grid__unit ~ div.grid__unit:nth-child(2) {
    float:none !important;
    background:url("watermark.png") no-repeat 254px 0 transparent;
}

/*Define Logo Here*/
.bank-branding {
	background: transparent url('logo.png') 22px 12px no-repeat;
	height:123px;
	position:inherit;
}
/*Advertisement Section*/
.bank-branding ul{
	margin-top: 4px;
}
/*Used around data areas*/
.content--block, #table--transactions, .checkfree-widget-container{
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
border:1px solid #00488b;background:#F7FAFB;
 background:#F7FAFB \9;
 padding:10px 10px 10px 15px; margin:10px; padding-bottom:20px \9;
}
div[data-bind*="hasFinishedProcessing"], #tranLegend {
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;border:none;background:transparent;padding:0px 0px 0px 0px; margin:0px; padding-bottom:0px \9;	
}
#transfer .content--block, #download .content--block, div.dropdown  .content--block{
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #00488b;background:#F7FAFB; 
background:#F7FAFB \9;-webkit-box-shadow:none;-moz-box-shadow:none; box-shadow:none; padding:26px 10px 10px 15px; margin:10px;
 padding-bottom:20px \9;
}
#table--transactions tbody tr:nth-child(odd), .table--trans-recent tbody tr:nth-child(odd), #scheduled-transfers .table--underlined tbody tr:nth-child(odd), #stopPaymentList .table--underlined tbody tr:nth-child(odd), .table--underlined tbody tr:nth-child(odd) { background:#f2f2f2; color:#777;}

#table--transactions tbody tr:nth-child(even), .table--trans-recent tbody tr:nth-child(even), #scheduled-transfers .table--underlined tbody tr:nth-child(even), #stopPaymentList .table--underlined tbody tr:nth-child(even), .table--underlined tbody tr:nth-child(even) { background:#fff; color:#777;}

thead th, td {
 padding: 0px 2px;
 font-size: 1rem;
 }
div.dropdown  .content--block {
	padding:10px;
}
.checkfree-widget-container {
	margin:0px;
	padding: 10px 0px 5px 0px;
}

/*Advertisement*/
.ad-container iframe{
}
.ad-container {
	/*width:100%;
	height:222px;
	background-image:url('slide_popmoney.jpg');
	background-repeat:no-repeat;
	background-size:contain;*/
}

/**************************************************/
/*                     Font                       */
/**************************************************/
/*Fonts should only be defined as pixels on the html element. Other elements should use REM units.*/
html {
	font-size:14px;
}
body {
	font-family: 'LatoRegular', Arial,Helvetica, sans-serif;
	font-size:1rem;
}

/*Link colors. To target data section only add main in front of the selector*/
a {
color: #0063be;  
}
a:visited {
	color:#1991ff;text-decoration: underline;
}
a:hover, a:active {
		color:#1991ff;text-decoration: underline;
}
p {
    color:#666;
}
a.btn--acctCreate {
	font-size:1rem;
	color:#0063be;
}

/*Negative Account Balance*/
.neg--balance {
	color:#0063be;
}

/*Action Buttons*/
.btn--default {
	background-color:#Ebab1b;
	color:#fff;
}
.btn--default:hover {
	background-color:#F3CC76;
	color:#ffffff;
}
.btn--link {
	margin:4px;  color:#00488b; background:#D5E3E9;
}
.btn--link:hover {
	color:#FFF; background:#0079C2; 
}
.btn--primary, a.btn--primary {
	background:#0063be;
	color:#fff;
}
.btn--primary:hover, a.btn--primary:hover {
	background:#1991ff;
	color:#fff;
}
.btn--thead, .header--non-sortable, .table--underlined th {
	color:#ffffff;
}

/*Alerts*/
.badge {
	background:#007ec2;
	color:#ffffff;
}

/*MFA*/
.mfa-divider {
	background:#dfdfdf;
}
.mfa-divider:before {
	background:#ffffff;
}

/*Data Tables*/
.text--plain {
	color:#777;
}
.slat {
	border-color:#0079C2;
}
.slat+.slat {
	border-top:1px solid #0079C2;
}
.table--underlined>thead>tr>th, .table--underlined>tbody>tr>th, .table--underlined>tbody>tr>td {
	border-bottom:1px solid #0079C2;
}
.table--underlined>thead tr:last-child th {
	border-bottom-width:2px;
}
.table--underlined>tbody tr:last-child td, .table--underlined .no-border {
	border-bottom-width:0;
}
.table--underlined>tfoot td {
	border-top:1px solid #0079C2;
}
thead th {
	background: #0079C2;
}
.arrow {
	border-color:#0079C2;
}
.arrow--top-right:after {
	border-bottom-color:#0079C2;
}

/*OPTIONAL FONTS*/
/*Data Area Header Dropdown - Account page*/
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li , main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li a {
	font-size:.85rem;
	font-weight:normal;
}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li , main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li a:hover {

}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li {
	padding:0px 0px 0px 5px;
}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li:hover {
	background-color:#00488b;
	color:#ffffff;
}
main div.grid:nth-child(1)  div.grid__unit:nth-child(1) div.dropdown ul li:hover a{
	color:#ffffff;
}
input, select {

}
h1, h2, h3, .h1, .h2, .h3 {
	color:#0063be; font-family:  'LatoRegular',Arial, sans-serif;
}
h4, h5, h6, .h4, .h5, .h6 {

}
h1, .h1 {
	font-size:1.71rem;color:#0063be;font-weight:normal;
}
h2, .h2 {
	font-size:1.43rem;
	color:#0079c2;font-weight:normal;
}
h3, .h3 {
	font-size:1.28rem;
	color:#777;font-weight:normal;
}
h4, .h4 {
	font-size:1.14rem;font-weight:normal;
	color:#00488b;
}
h5, .h5 {
	font-size:1rem;
}
h6, .h6 {
	font-size:.86rem;
}

/*Various alerts messages */
.alert--error {
	background:#fbeae9;
	border-color:#f7d6d3;
	color:#ad3123;
}
.alert--info {
	background:#d9edf7;
	border-color:#bce8f1;
	color:#2e6a87;
}
.alert--success {
	background:#dff0d8;
	border-color:#d6e9c6;
	color:#3a703c;
}
.alert--warning {
	background:#fffdd5;
	border-color:#ffe89e;
	color:#8c6b33;
}
.text--error {
	color:#ad3123;
}
.text--info {
	color:#2e6a87;
}
.text--muted {
	color:#999;
}
.text--success {
	color:#3a703c;
}
.text--warning {
	color:#8c6b33;
}

/**************************************************/
/*            Utility Navigation                  */
/**************************************************/
/*Position of Utility Section*/
header div.grid:nth-child(1)  div.grid__unit:nth-child(1) {

}

/*Welcome Message*/
.message--welcome {


	padding-top:5px;
}
.message--welcome p {
	font-size:.93rem; color:#777;
}

/*Utility Navigation Buttons*/
.nav--utility {
}
.nav--utility li {
}
.nav--utility a{
	font-family:  'LatoRegular', arial,  sans-serif;
	color:#777;
}
.nav--utility a:hover {
text-decoration:underline;
}
/**************************************************/
/*                 Icons Utility nav               */
/**************************************************/
        
.nav--utility a.navitem[href*="https://www.firstsavingsbanks.com/form-contact-us.aspx"] {
    background: transparent url('Contact-24.png') left no-repeat;
    /*font-size:0.1px;color:transparent;*/padding-left:25px;
 }
 .nav--utility a.navitem[href*="https://www.firstsavingsbanks.com/locations-hours-atms.htm"] {
    background: transparent url('Locations-24.gif') left no-repeat;
   /*font-size:0.1px;color:transparent;*/padding-left:25px;
 }
.nav--utility a.navitem[href*="gethelp"] {
    background: transparent url('help-24.png') left no-repeat;
    /*font-size:0.1px;color:transparent;*/;padding-left:25px;
}
.nav--utility a.navitem[href*="Alert"] {
    background: transparent url('Alert-24.png') left no-repeat; 
    /*font-size:0.1px;color:transparent;*/padding-left:25px;
}
.nav--utility a.navitem[href*="Mail"] {
    background: transparent url('email-24.png') left no-repeat; 
     /*font-size:0.1px;color:transparent;*/padding-left:25px;
}
.nav--utility a.navitem[href*="Chat"] {
    background: transparent url('chat24.png') left no-repeat; 
     /*font-size:0.1px;color:transparent;*/padding-left:25px;
}
.nav--utility a.navitem[href*="Profile"] {
    background: transparent url('Profie-24.png') left no-repeat;
   /*font-size:0.1px;color:transparent;*/padding-left:25px;
}
.nav--utility a.navitem[href*="Logout"] {
    background: transparent url('Logout-24.png') left no-repeat; 
     /*font-size:0.1px;color:transparent;*/padding-left:25px;
}
.nav--utility a.navitem[href*="Login"] {
    background: transparent url('Login24.png') left no-repeat;
    /*font-size:0.1px;color:transparent;*/padding-left:25px;
}
   
/**************************************************/
/*            Primary Navigation                  */
/**************************************************/
/*Primary Navigation Positioning*/
header div.grid__unit ~ div.grid__unit:nth-child(3) {
    position:absolute;
	top:123px;
	/*padding-left:31px;*/
	width:100%
}

/*Navigation Buttons*/
.nav--primary li {
   background: #0063be;
   height: 59px;  border-left :1px solid #45a6ff; border-right:1px solid #002446;
}
.nav--primary li a{
	font-size:1.14rem;
	font-weight:bold; 
	height: 59px;
    line-height:59px !important;
	padding:0px 20px !important;
	color:#fff;
}
.nav--primary li.is--selected a{
background:#1991ff;
}
.nav--primary li a:hover {
	background:#1991ff; text-decoration:none;
	
}
.nav--primary a { line-height:59px !important; font-family:  'LatoRegular', Arial,sans-serif;

}

/**************************************************/
/*            Account Navigation                  */
/**************************************************/
.nav--account {

}
.nav--account li a {
	background:#00488b; color:#fff; border:1px solid #00488b;
}
.nav--account li a:hover {
	background:#fff; color:#1991ff; border:1px solid #1991ff;
}
.nav--account li.is--selected a {
	background:#fff; color:#1991ff; border:1px solid #1991ff;
}

/**************************************************/
/*                   Footer                       */
/**************************************************/
.page--footer {
 background:#00488b ;
 height: 150px;

}
footer nav{
 padding-top:15px;
}
footer p {
  color:#FFF ;
  font-family: 'LatoRegular', arial, sans-serif;
}
footer a {
    color:#FFF !important;
    text-decoration:none !important;
	font-family:'LatoRegular', arial, sans-serif;
	font-size:1rem;
}

footer a:hover{
    text-decoration:underline !important;
}



/**************************************************/
/*                Media Queries                   */
/**************************************************/
@media screen and (max-width: 950px) {
	html {
		font-size:13px;
	}
	.nav--utility a{
		font-size:.9rem;
	}
	header div.grid__unit ~ div.grid__unit:nth-child(3) {
		width:100%
	}
	.nav--primary li a{
		padding:6px 12px !important;
	}
/*Add "mobile" logo here*/
	.bank-branding {
		background-image:url('logo_web.png');
		background-repeat:no-repeat;
		background-position: 14px 30px;
	}
	
}
@media screen and (max-width: 790px) {
	/*Advertisement Section*/
	.bank-branding ul{
		margin-top: 4px;
		max-width:500px;
	}
}
@media screen and (max-width: 755px) {
	/*Advertisement Section*/
	.bank-branding ul{
		margin-top: 4px;
		max-width:450px;
	}
	/*Welcome Message*/
	.message--welcome {
		padding-top:5px;
		padding-right: 5px;
	}
	.message--welcome p {
		font-size:.8rem; color:#777;
	}
	.nav--utility a{
		font-size:.8rem;
	}

}
@media screen and (max-width: 650px) {
	/**************************************************/
/*                 Icons Utility nav               */
/**************************************************/
        
.nav--utility a.navitem[href*="https://www.firstsavingsbanks.com/form-contact-us.aspx"] {
    background: transparent url('Contact-24.png') left no-repeat;
    font-size:0.1px;color:transparent;padding-left:25px;
 }
 .nav--utility a.navitem[href*="https://www.firstsavingsbanks.com/locations-hours-atms.htm"] {
    background: transparent url('Locations-24.gif') left no-repeat;
    font-size:0.1px;color:transparent;padding-left:25px;
 }
.nav--utility a.navitem[href*="gethelp"] {
    background: transparent url('help-24.png') left no-repeat;
    font-size:0.1px;color:transparent;padding-left:25px;
}
.nav--utility a.navitem[href*="Alert"] {
    background: transparent url('Alert-24.png') left no-repeat; 
    font-size:0.1px;color:transparent;padding-left:25px;
}
.nav--utility a.navitem[href*="Mail"] {
    background: transparent url('email-24.png') left no-repeat; 
    font-size:0.1px;color:transparent;padding-left:25px;
}
.nav--utility a.navitem[href*="Chat"] {
    background: transparent url('chat24.png') left no-repeat; 
    font-size:0.1px;color:transparent;padding-left:25px;
}
.nav--utility a.navitem[href*="Profile"] {
    background: transparent url('Profie-24.png') left no-repeat;
    font-size:0.1px;color:transparent;padding-left:25px;
}
.nav--utility a.navitem[href*="Logout"] {
    background: transparent url('Logout-24.png') left no-repeat; 
    font-size:0.1px;color:transparent;padding-left:25px;
}
.nav--utility a.navitem[href*="Login"] {
    background: transparent url('Login24.png') left no-repeat;
    font-size:0.1px;color:transparent;padding-left:25px;
}
/*Advertisement Section*/
	.bank-branding ul{
		margin-top: 4px;
		max-width:400px;
	}
}
@media screen and (max-width: 599px) {
	html {
		font-size:12px;
	}
	body {
		background: #fff;
	}
	header {
		background-color:#fff;
	}
	#utilitySection, .message--welcome {
		float:none !important;
	}
	.message--welcome  {
		background-color:#fff;
		padding: 10px 15px;
	}
	.message--welcome p {
		color:#777;
	}
	.message--welcome p:nth-child(1){
		float:left;
		padding-left:10px;
	}
	/*Banner*/
	header div.grid__unit ~ div.grid__unit:nth-child(2) {
  	  float:none !important;
  	  /* background:url("") no-repeat 254px 0 transparent; */
 	}
	/*Add "mobile" logo here*/
	.bank-branding {
		background: transparent url('logo-icon2.png') 10px  60px  no-repeat;
		height: 210px;
	}
	/*Advertisement Section*/
	.bank-branding ul{
		margin-top: 90px;
		max-width:575px;
	}
	.wrapper {
		min-width:auto;
		padding:0px;
	}
	main {
		padding:10px;
	}
	.nav--utility {
		float:right !important;
	}
	.nav--utility a{
		font-size:1rem;
		color:#777;
	}
		header div.grid__unit ~ div.grid__unit:nth-child(3) {
		position:inherit;
		top:inherit;
		left:inherit;
		width:100%;
		padding-left:0px;
	}
	.nav--primary li:nth-child(1) {
		border-top: 1px solid #f2f2f2;
	}
	.nav--primary li {
		border-bottom: 1px solid #f2f2f2;
		background:#00488b;
		text-align:center;
	}
	.nav--primary li a{
		background:;
		padding:0px !important;
		margin:0px !important;
		color:#fff;
	}
	.nav--primary li.is--selected a{
		border:none;
	}
	.nav--primary li:hover {
		background:#1991ff;
		color:#fff;
	}
	.nav--primary li a:hover {
		background:#1991ff;
		color:#fff;
		
	}
	.nav--primary a {
		line-height: 46px;
		font-weight:normal;
		color:#ffffff;
		font-family: 'LatoRegular', arial, sans-serif;
	}


}
@media screen and (max-width: 430px) {
	.nav--utility a{
		font-size:.92rem;
	}
}
@media screen and (max-width: 350px) {
	/*Add "mobile" logo here*/
	.bank-branding {
		background: transparent url('logo-icon2.png') center  no-repeat;
		height: 210px;
	}
	/*Advertisement Section*/
	.bank-branding ul{
		margin-top: 80px;
		max-width:575px;
	}
}