﻿/* defaults */
/* flexslider default marquee styles */






/*------------------------------------------ DEFAULTS ------------------------------------------------*/
/******************************************************************************************************/

.hp-top-row {margin-bottom: 25px; margin-left: -50px; margin-right: -50px;}
.hp-top-row-content {position: relative;}

/* 1200 */
@media screen and (max-width: 1200px) {
	.hp-top-row {margin-bottom: 25px; margin-left: -20px; margin-right: -20px;}
}

/* 800 */
@media screen and (max-width: 800px) {.hp-top-row {margin-top: -20px;}}

/* 600 */
@media screen and (max-width: 600px) {.hp-top-row {margin-top: -30px;}}

#banking-outer, #marquee-outer {
    padding-left: 0px;
	padding-right: 0px;
	}






/*--------------------------------- FLEXSLIDER DEFAULT MARQUEE STYLES --------------------------------*/
/*------------------------------------------- do not touch -------------------------------------------*/
/******************************************************************************************************/

/* resets */
body .flexslider-marquee .flex-wrapper a:active, .flexslider-marquee .flexslider a:active, .flexslider-marquee .flex-wrapper a:focus, .flexslider-marquee .flexslider a:focus {outline: none;}
body .flexslider-marquee .slides, .flexslider-marquee .flex-control-nav, .flexslider-marquee .flex-direction-nav {margin: 0;padding: 0;list-style: none;}

/* necessary styles*/
.flexslider-marquee {margin: 0;padding: 0;}
.flexslider-marquee .slides > li {display: none;margin: 0px;-webkit-backface-visibility: hidden;overflow: hidden;}
.flexslider-marquee .slides img {width: 100%;display: block;}
body .flexslider-marquee .flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.flexslider-marquee .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
.flexslider-marquee .no-js .slides > li:first-child {display: block;}
.flexslider-marquee {margin: 0px; border: none; zoom: 1; width: 100%;}
.flexslider-marquee .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.flexslider-marquee .loading .flex-viewport {max-height: 300px;}
.flexslider-marquee .slides {zoom: 1;}
.flexslider-marquee .carousel li {margin-right: 5px;}

/* Direction Nav */
.flexslider-marquee .flex-direction-nav {*height: 0;display: none;}

/* Control Nav */
.flexslider-marquee .flex-control-nav {position: absolute; text-align: center;z-index: 10;bottom: 0px;}
.flexslider-marquee .flex-control-nav li {margin: 0px; display: inline-block; zoom: 1; *display: inline;}
.flexslider-marquee .flex-control-paging li a {width: 12px;height: 12px;display: block;background: clear;cursor: pointer;text-indent: 9999px;overflow: hidden; border-radius: 12px; color: #000 !important; border: solid 1px #fff;}
.flexslider-marquee .flex-control-paging li a:hover {background: #fff; opacity: .6;}
.flexslider-marquee .flex-control-paging li a.flex-active {background:#fff; cursor: default;}
.flex-control-thumbs {margin: 5px 0 0;position: static;overflow: hidden;}
.flex-control-thumbs li {float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
	.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
.flexslider-marquee .slides > li {list-style-type: none; padding: 0; margin: 0;}
.flexslider-marquee .slides li .slide-wrapper {position: absolute; width: 100%; height: 100%;}
.flex-control-nav li {display: inline-block;}
.flex-control-nav li a{color:#000;}






/*--------------------------------------- MARQUEE STYLES ---------------------------------------------*/
/******************************************************************************************************/

#marquee-outer {
	margin-bottom: 20px;
	width: 100%;
	}

.hp-top-row {
	position: relative;
	margin-top: -30px;
	margin-bottom: 0px;
	}

.hp-top-row-lg {
	margin-top: -10px;
	margin-left: -100px !important;
	margin-right: -100px !important;
	margin-bottom: 0px;
	}

#banking-outer {
	position: absolute;
	z-index: 10;
	top: 0px;
	right: 30px;
	width: 260px;
	}

#banking {height: 320px; padding: 32px;}

#marquee, .flexslider-marquee .slides > li {
	height: 350px;
}

.flexslider-marquee .flex-control-nav {bottom: 15px; left: 45px;}
.flexslider-marquee .flex-control-nav li {margin: 0 5px;}

.flexslider-marquee .flex-control-paging li a {
    width: 12px;
    height: 12px;
	border-radius: 12px;
    color: #000 !important;
	border: solid 1px #fff;
	}

.flexslider-marquee .flex-control-paging li a:hover {background: #fff; opacity: .6;}
.flexslider-marquee .flex-control-paging li a.flex-active {background:#fff; cursor: default;}

/* 860 */
@media screen and (max-width: 860px) {
	.flexslider-marquee .flex-control-nav {bottom: -35px; left: 50%; right: auto !important;}
	.flexslider-marquee .flex-control-nav li {margin: 0 5px;}
	.flexslider-marquee .flex-control-paging li a {border: solid 1px #004b8d;}
	.flexslider-marquee .flex-control-paging li a.flex-active {background:#004b8d; cursor: default;}
	#marquee-outer {margin-bottom: 10px;}
	}

/* max 750 */
@media only screen and (max-width: 750px) {
    #marquee, .flexslider-marquee .slides > li {height: 310px;}
	}

/* max 599 */
@media screen and (max-width: 599px) {#banking, #marquee, .flexslider-marquee .slides > li {height: 250px;}}







/*--------------------------------------- BANKING LOG IN ---------------------------------------------*/
/******************************************************************************************************/

#banking {
    background: #004b8d;
	position: relative;
	position: absolute;
	padding: 25px 50px 20px 30px;
	padding: 32px;
	}

.login-cell h3, .login-cell h3 span {
	color: #fff;
	font-weight: 200;
	font-size: 20px;
	margin-bottom: 0px;
	}

.login-cell h3 span {
	display: block;
	font-weight: 300;
	font-size: 27px;
	font-size: 27px;
	padding-bottom: 12px;
	}

.login-cell h6 {color: #dadcdc; font-weight: 400; margin-bottom: 8px; width: 90%; line-height: 1.3;}

.login-cell .form-inline input {float: left; width: 60%;}

.login-cell .form-control {
	border: none;
	border-radius: 0px;
	box-shadow: black !important;
	-webkit-box-shadow: none;
	}

.login-cell .form-control:focus, .login-cell textarea:focus {box-shadow: none;}
.login-cell .form-inline button {margin-right: 0px; margin-bottom: 0px; width: 40%; padding: 11px 0 12px 0; font-size: 15px;}
.login-cell .form-inline button:before {
	font-family: "unfcu" !important;
	content: '\E025';
	font-size: .8em;
	padding-right: 6px;
	}

#banking .form-inline {margin-bottom: 20px;}

#banking ul li, #banking ul {
	list-style-type: none !important;
	padding: 0;
	margin: 0;
	}

#banking ul li {
	float: left;
	border-right: solid 1px #c2e3f3;
	line-height: 15px;
	padding-right: 8px;
	}

#banking ul li:last-of-type {
	border-right: none;
	padding-left: 8px;
	padding-right: 0px;
	}

#banking ul li a {
	color: #dadcdc; 
	font-size: 14px; 
	}

#banking ul li:before {content: '';}

.routing {
	position: absolute;
	background: #0b4079;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 10px 20px 10px 30px;
	color: #fff;
	font-size: 14px;
	line-height: 22px;
	}


body td.routing a, body td.routing a:visited {color: #fff !important; text-decoration: none !important;}
body td.routing a:hover, body td.routing a:visited:hover {text-decoration: underline !important;}

body td.routing a:after {
	font-family: "unfcu" !important;
	content: attr(data-icon);
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 0;
	line-height: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border: none !important;
	text-decoration: none !important;
	content: "\e043";
	top: 3px !important;
	}

.routing b {font-weight: normal; font-family: 'roboto', Arial, Sans-Serif; font-size: 18px;}

/* max 1200 */
@media screen and (max-width: 1200px) {
	#banking {padding: 20px;}
	}

/* max 1000 */
@media screen and (max-width: 1000px) {
	#banking {padding: 15px;}
	.login-cell h3, .login-cell h3 span {font-size: 18px; text-align: center;}
	.login-cell h3 {margin-bottom: 5px;}
	.login-cell h3 span {font-size: 24px; padding-bottom: 5px;}
	#banking ul li a {font-size: 13px;}
	#banking ul li {padding-right: 6px;}
	#banking ul li:last-of-type {padding-left: 6px;}
	.login-cell .form-inline input {width: 100%; margin-bottom: 5px;}
	.login-cell .form-inline button {width: 100%; font-size: 14px; padding: 10px 0px;}
	.routing {text-align: center;}
	#banking ul {padding-left: 10px;}
	.login-cell h6 {text-align: center; font-size: 15px; line-height: 1.2;}
	}







/*------------------------------------------- ICON ROW -----------------------------------------------*/
/******************************************************************************************************/

.cnt_name-contact, .cnt_name-Location, .cnt_name-atm, .cnt_name-Rates, .cnt_name-community {display: none !important; visibility: hidden;}

#hp-icons {
	border-bottom: solid 2px #004b8d;
	border-bottom: solid 1px #aaafaf;
	padding-bottom: 30px;
	margin-bottom: 40px;
}

#join-icon, #why-icon, #contact-icon, #locations-icon, #atms-icon, #rates-icon {padding: 0px 0px;}

#hp-icons .icon-center-top:before {
	padding: 15px 0;
	font-size: 40px;
	}

#hp-icons #why-icon .icon-center-top:before {
	font-size: 54px;
	padding: 8px 0;
	}

#hp-mission {padding-right: 0px;}


/* min 860 - max 1160 */
@media screen and (min-width: 860px) and (max-width: 1160px) {

	#hp-icons p {font-size: 15px;}
	#hp-icons .col-md-9 {
		width: 70%;
		}

	#hp-icons .col-md-3 {width: 30%;}

	}

/* max 999 */
@media screen and (max-width: 999px) {
	
	#hp-icons .icon-center-top {
		font-size: 16px;
		margin-bottom: 0px !important;
		}

	#hp-icons h5 {margin-bottom: 10px;}

	}

/* max 859 */
@media screen and (max-width: 859px) {
	
	#hp-icons {
		border-bottom: solid 2px #004b8d;
		padding-top: 20px;
		}

	}

/* min 450 - max 599 */
@media screen and (min-width: 450px) and (max-width: 599px) {#hp-icons-container {padding: 0px 60px;}}







/*----------------------------------- NEWS & ANNOUNCEMENTS -------------------------------------------*/
/******************************************************************************************************/

#hp-news {margin-bottom: 40px;}
#hp-news h4 {
	font-size: 22px;
	margin-bottom: 10px;
}

.announcement {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: solid 1px #dadcdc;
	}

.announcement:last-of-type {
	padding-bottom: 0px;
	border: none;
}

.new {
	background: #004b8d;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.09em;
    line-height: 12px;
    padding: 4px 60px 4px 60px;
	margin-bottom: 18px !important;
	display: inline-block;
}

@media screen and (max-width: 1000px) {
    #hp-news .announcement-btn:last-of-type {border-bottom: solid 1px #dadcdc; margin-bottom: 30px; padding-bottom: 30px;}
	#hp-news h3 {margin: 5px 0px 25px 0px;}
	}

/* 600 */
@media only screen and (max-width: 600px) {.new {width: 100%; text-align: center; margin-bottom: 20px !important;}}







/*----------------------------------------- ASIDE ----------------------------------------------------*/
/******************************************************************************************************/

.aside-content { margin-bottom: 30px;}

@media screen and (max-width: 1000px) and (min-width: 600px) {.hp-aside {width: 80%; margin-left: 10%;}}

