/***********************************************************************************
Custom Styles for Transportation Federal Credit Union

Basic Colors: 

Dark Blue: #002663;
Light Blue: #84afdd;

Promo Box Colors:

#fdba14 - Prepare yellow
#f6871f - Prepare dark yellow
#fee29c - Prepare light yellow

#43ad4b - Go green
#38913f - Go dark green
#bce5bf - Go light green

#0283c7 - Connect blue
#0276b4 - Connect dark blue
#a3dffe - Connect light blue

#ed1e26 - Arrive red
#df0506 - Arrive dark red
#f9afb2 - Arrive light red


#84afdd - used for links -- contrast too low.
Changed to #3170b3

*/

/***********************************************************************************
Basic Styles
*/

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

}

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

}

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

}

body {
	font-family: 'MyriadWebProRegular', Sans-Serif;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	color: #002663;
	font-family: 'MyriadWebProRegular', Sans-Serif;
}

h1 {
	font-size: 2.3125rem;
	margin-top: 0;
	padding-top: 0;
}

h2 {
	font-size: 1.6875rem;
}

h3 {
	font-size: 1.3875rem;
}

p {
	line-height: 1.3em;
	color: #333333;
}

label {
	color: #ffffff;
}

/***********************************************************************************
Buttons
*/

button, .button {
	font-family: 'MyriadWebProRegular', Sans-Serif;
}

.button,
button, .button a, button a
input[type="submit"] {
	background-color: #fdba14;
	color: #002663;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: #002663;
	color: #ffffff;
	text-decoration: none;
}

/***********************************************************************************
Special Notices / Alert Box
*/

.special-notice {
	margin: 10px 0;
	padding: 0;
}

.alert-box,
.alert-box.alert {
	margin: 0;
	border: none;
	color: #000000;
	background-color: #ffde91;
}

.alert-box p {
	color: #000000;
	margin-bottom: 0;
}

/***********************************************************************************
Navigation Styles
*/

.navigation {
	background-color: #002663;
	/*background-image: url("../img/bg-navigation.png");*/
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
	color: #ffffff;
}

.top-bar {
	background: transparent;
}

.top-bar-section ul li {
	background: transparent;
}

.top-bar-section li:not(.has-form) a:not(.button) {
	background: transparent;
}

.top-bar-section ul li:hover:not(.has-form) > a,
.top-bar-section li:not(.has-form) a:hover:not(.button) {
  background-color: #3170b3;
}

.top-bar-section .dropdown li a,
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  background-color: #3170b3;
}

/***********************************************************************************
Header Styles
*/

.header {
	background-color: #fff;
	color: #002663;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#84afdd+0,ffffff+77 */
}

.header a:link {
	color: #002663;
}

.header h1, 
.header h2, 
.header h3, 
.header h4, 
.header h5, 
.header h6 {
	color: #002663;
}

.logo {
	padding-top: 20px;
	text-align: center;
}

.login-text {
	font-size: 12px;
	text-align: right;
	padding-top: 8px;
}

.header-links {
	float: right;
	font-size: 12px;
	padding-top: 7px;
}

/***********************************************************************************
Account Access Styles
*/

.account-access {
	padding-top: 22px;
}

.account-access h3 {
	font-size: 16px;
}

.account-access input[type="text"], 
.account-access input[type="password"] {
	margin: 0 0 5px 0;
	padding: 5px;
	height: auto;
	font-size: 12px;
}

.account-access label {
	color: #002663;
}

.account-access .button {
	padding: 14px 30px;
	border: none;
	font-size: 18px;
}

.account-access input[type="submit"] {
	padding: 5px 15px;
	border: none;
	font-size: 14px;
}

.account-access a:link,
.account-access a:visited,
.account-access a:active {
	text-decoration: underline;
	color: #002663; 
}

.account-access a:hover {
	color: #000000;
}

.account-access-mobile {
	text-align: center;
	padding-top: 15px;
}

.account-access-mobile .button {
	padding: 14px 30px;
	background-color: #fdba14;
	color: #000000;
	border: none;
	font-size: 18px;
}

.app-access-mobile {
	text-align: center;
}

.app-access-mobile .button {
	padding: 7px 15px;
	background-color: #fdba14;
	color: #000000;
	border: none;
	font-size: 14px;
}

/***********************************************************************************
Slider Styles
*/

.slider {
	padding: 20px 0 0 0;
}

.slick-dots {
	padding: 10px 0;
	bottom: -65px;
}

.slick-slider p {
	margin-bottom: 0;
}

/***********************************************************************************
Promo Styles
*/

.promos {
	background-color: #84afdd;
	/* background-image: url("/img/bg-promos.jpg");
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: left top;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto; */
	padding: 20px 0;
}

.bbox {
	padding:10px 15px 10px 10px;
	margin-bottom: 15px;
}

.bbox-last {
	margin-bottom: 0px;
}

.bbox img {
	float:left;
	margin:0 10px 0 0;
}

.bbox p {
	margin:0;
	color:#000;
}

#prepare_box {
	background-color: #fdba14;
	background: url("/img/a_prepare_swoosh.png") no-repeat top right, linear-gradient(#fdba14 60%, #fee29c);
}

#prepare_box:hover {
	background-color: #f6871f;
	background: url("/img/a_prepare_swoosh.png") no-repeat top right, linear-gradient(#f6871f 60%, #fee29c);
}

#go_box {
	background-color: #43ad4b;
	background: url("/img/b_go_swoosh.png") no-repeat top right, linear-gradient(#43ad4b 60%, #bce5bf);
}

#go_box:hover {
	background-color: #38913f;
	background: url("/img/b_go_swoosh.png") no-repeat top right, linear-gradient(#38913f 60%, #bce5bf);
}

#connect_box {
	background-color: #0283c7; 
	background:  url("/img/c_connect_swoosh.png") no-repeat top right, linear-gradient(#0283c7 60%, #a3dffe);
}

#connect_box:hover {
	background-color: #0276b4; 
	background:  url("/img/c_connect_swoosh.png") no-repeat top right, linear-gradient(#0276b4 60%, #a3dffe);
}

#arrive_box {
	background-color: #ed1e26; 
	background: url("/img/d_arrive_swoosh.png") no-repeat top right, linear-gradient(#ed1e26 60%, #f9afb2);
}

#arrive_box:hover {
	background-color: #df0506; 
	background: url("/img/d_arrive_swoosh.png") no-repeat top right, linear-gradient(#df0506 60%, #f9afb2);
}

/***********************************************************************************
Content Styles
*/

.content-wrapper {
	padding: 20px 0;
}

.content .button {
	background-color: transparent;
	padding: 0;
	margin: 0;
}

.content .button a:link, .button_x a:link, .content .button a:visited {
	background-color: #002663;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
	display: inline-block;
	color: #fff;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 6px;
	padding-left: 15px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	text-decoration-line: none;
	text-decoration-style: solid;
}

.content .button a:hover, .button_x a:hover {
	background-color: #fdaf0c;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
	color: #002663;
}

/***********************************************************************************
Ratesheet Styles
*/

single_ratesheet{
	padding: 0 0 3em 0;
}

.single_ratesheet table {
	margin: .5em 0; 
	width: 100%; 
}

.single_ratesheet table th,
.single_ratesheet table td {
	padding: 5px; 
	vertical-align: 
	top; text-align: left;
}

.single_ratesheet table th {
	color: #FFF; 
	background: #1e2e78;
}

.single_ratesheet table tr.alt1 td {
	background: #D6E8F5;
}

.single_ratesheet table tr.alt2 td {
	background: #EAF3FA;
}

.single_ratesheet table tr.alt1 td.cell_highlight {
	color: #FFF; 
	background: #3388cc;
}

.single_ratesheet table tr.alt2 td.cell_highlight {
	color: #FFF; 
	background: #2a79b7;
}

.single_ratesheet h4 {
	color: #034181; 
	text-shadow: #000 0px 0px;
}

.single_ratesheet h4 em {
	font-size: 12px; color: #034181;
}

.single_ratesheet table td#credit_card_1-2, 
.single_ratesheet table td#credit_card_3-2 {
	font-size: 16px;
}

/***********************************************************************************
Sidebar Styles
*/

.sidebar {
	color: #000000;
	background-color: #d1e1f2;
	padding: 20px 20px 0 20px;
	/* background-image: url("/img/bg-sidebar.jpg");
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: left top;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto; */

}

.sidebar a:link,
.sidebar a:visited {
	color: #000000;
}

.sidebar a:active,
.sidebar a:hover {
	color: #002663;
	text-decoration: underline;
}

.sidebar ul {
	list-style-image: url("../img/arrow-transfcu.png");
}

.go-buttons {
	padding: 10px;
	margin: 0;
	width: 100%;
	margin-bottom: 25px;
}

.go-buttons:hover {
	background-color: #002663;
	color: #ffffff;
}

.atm-button {
	margin-top: 20px;
	color: #002663 !important;
	text-decoration: none !important;
}

.atm-button:hover {
	color: #ffffff !important;
}

.atm-button a:link {
	color: #ffffff;
}

/***********************************************************************************
Footer Styles
*/

.footer {
	background-color: #002663;
	/*background-image: url("../img/bg-footer.png");*/
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-clip: border-box;
	background-origin: padding-box;
	background-size: auto auto;
	position: relative;
	padding: 20px 0;
}

.footer-info {
	text-align: left;
	color: #ffffff;
}

.footer-info a:link,
.footer-info a:visited {
	color: #ffffff;
	text-decoration: underline;
	font-size: 12px;
}

.footer-info ul {
	list-style: none;
	margin: 0;
	font-size: 12px;
	padding-bottom: 10px;
}

.footer-info p {
	padding: 0;
	margin: 0;
	color: #ffffff;
	line-height: 1.2em;
	font-size: 12px;
}

.footer-tagline {
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer-logos {
	text-align: left;
	padding-top: 20px;
}

.footer-logos ul {
	list-style: none;
	margin: 0;
}

.footer-logos li {
	display: inline-block;
	text-align: left;
	padding: 0 5px;
}

/***********************************************************************************
Media Queries
*/

/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 40.0625em) {

	.footer-info li {
		display: inline-block;
		text-align: left;
		padding-right: 10px;
	}

	.footer-logos {
		text-align: left;
		padding-top: 0;
	}

	.header {
		/* padding-bottom: 20px; */
	}
}

/* Styles for screens that are at least 1024px; */
@media only screen and (min-width: 64.0625em) {
	.logo {
		text-align: left;
	}	

	.footer-logos {
		text-align: right;
	}

	.footer-tagline {
		padding-top: 0;
		padding-bottom: 0;
	}

	.bbox {
		min-height:130px;
		padding:15px 15px 10px 10px;
		margin-bottom: 0;
	}
	
	.bbox img {
		margin: 0 10px 30px 0;
	}

	.go-buttons {
		margin-bottom: 0;
	}


	/* Compensate for shorter, wider GO sign */	
	#go_box img {
		margin:0 10px 45px 0;
	}

}



/* Styles for new search and social media toolbar */

.toolbar {
	width:100%;
	background-color:#fdba14;
	color:#002663;
	padding:15px 10px 0 10px;
	}

.toolbar label {
	color:#002663;
	display:inline;
	font-weight:bold;	
}

.toolbar input[type="search"] {
display:inline;
	width: 70%;
	}

.toolbar p {
text-align:center;	
}	
	
@media only screen and (min-width: 64.0625em) {
.toolbar p {
text-align:right;
margin-top:4px;	
}	

}

.toolbar img {
	width:32px;
	height:32px;
}



.content .bigyelbtn {margin-bottom:6px;}

.content .bigyelbtn {
padding:7px 5px 3px 5px;
border-radius:3px;
background:#fdba14; /* Gold */
width:100%;
transition-duration: 0.4s;
}

.content .bigyelbtn:hover {
background:#002663; /* Dark Blue */
}

.content .bigyelbtn a { 
color:#002663;
}


.content .bigyelbtn:hover a {
color:#fff;
}

.content .bigyelbtn p {
text-align:center;
margin-bottom:3px;
}