/*JP 5-1-2013*/

/*CONTENTS:

Layout framework for responsive columns, site wrappers, 
and dealing with all layout elements at defined breakpoints.
_____________________________________________________________
1. Column Layouts
	1.1 Percentage based columns
	1.2 Header and Page Body Columns
	1.3 Inner padding for responsive columns
2. Responsive Column Layouts
3. Header and Page Body Columns
4. Site Layout Containers
5. Clearfix and Clearing
6. Floating
7. Show or hide for varying screen sizes
8. Header Elements
9. Homepage Elements
	9.1 Homepage Banners
	9.2 Homepage Login
	9.3 Homepage Content Areas

10. General Responsive Elements
	10.1 
	10.2 Smaller than 1280 wide but larger than 768 wide
	10.3 Smaller than 1024 wide
	10.4 At least 768 wide
	10.5 Between 640 wide and 768 wide
	10.6 Smaller than 768 wide
	10.7 Smaller than 767 wide
	10.8 Smaller than 480 wide
	10.9 Smaller than 400 wide

*/

/* ================ 1. Column Layouts ================ */

/*1.1 Percentage based columns*/

.onewhole { width: 100% !important; }

.onehalf {
    width: 50% !important;
    margin: auto;
}

.onethird {
    width: 33.333333% !important;
    margin: auto;
}

.twothirds {
    width: 66.666666% !important;
    margin: auto;
}

.onefourth {
    width: 25% !important;
    margin: auto;
}

.threefourths {
    width: 75% !important;
    margin: auto;
}

.onefifth {
    width: 20% !important;
    margin: auto;
}

.twofifths {
    width: 40% !important;
    margin: auto;
}

.threefifths {
    width: 60% !important;
    margin: auto;
}

.fourfifths {
    width: 80% !important;
    margin: auto;
}

.left .inner { padding: 3% !important; }

.right .inner { padding: 3% !important; }

div.inner:empty { display: none; }

/*================= 2. Responsive Column Layouts =================*/

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

/*make all the narrower columns full width and clear them*/
.onefourth, .threefourths, .onefifth, .twofifths, .threefifths {
    width: 100% !important;
    clear: both;
}
}

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

/*make the 1/3 columns full width and clear them*/
.onethird, .twothirds {
    width: 100% !important;
    clear: both;
}
}

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

/*make the 1/2 columns full width and clear them*/
.onehalf {
    width: 100% !important;
    clear: both;
}
}

/*but don't do it in these places...*/

.header-bar .onethird {
    width: 33.333333% !important;
    clear: none;
}

.header-bar .twothirds {
    width: 66.666666% !important;
    clear: none;
}

.header-bar .onehalf, .header-menu .onehalf {
    width: 50% !important;
    clear: none;
}

/*================= 3. Header and Page Body Columns =================*/

.col1, .col1-head { margin: 0;/*max-width:250px;*/ }

.col2, .col2-head { margin: 0;/*max-width:460px;*/ }

.col3, .col3-head { /*max-width:250px;*/ }

.col1-head {
    margin: 0;
    width: 20.20202020202% /*200/990*/;
    float: left;
}

.col2-head {
    margin: 0 auto;
    width: 79.7979797979798% /*790/990*/;
    float: right;
}

.col3-head { }

/*this is where we set the width of the site columns (if custom)*/
.col1 {
    margin: 0;
    width: 20.20202020202% /*200/990*/;
    float: left;
}

.col1-wide { width: 69.6969696969697% /*690/990*/; }

.col2 {
    margin: 0 auto;
    width: 49.4949494949495% /*490/990*/;
    float: right;
}

.col2-wide { width: 79.7979797979798% /*790/990*/; }

.col3 {
    margin: 0;
    width: 30.3030303030303% /*300/990*/;
    float: left;
}

.colfull, .col-full {
    width: 100%;
    display: block !important;
}

/*1.3 Inner padding for responsive columns*/

.col1 .inner { padding: 20px 15% 0 0; }

.col1-wide .inner { padding: 20px 0; }

.col2 .inner { padding: 20px 0; }

.col3 .inner { padding: 20px 0 0 15%; }

.colfull .inner, .col-full .inner { padding: 20px 0; }

/*1.4 Homepage Columns*/
.col1-home { width: 72.7272727272727% }

.col2-home { width: 27.2727272727273% }

.col2-home-inner { padding: 0 0 0 20px; }

/* ================ 4. Site Layout Containers ================ */

.wrapper {/*global container to set width and center*/
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.wrapper_inner { }

.page_body, div.header-fullsize {
    max-width: 970px;
    padding: 0;
    margin: auto;
}

.header, .footer {
    width: 100%;
    margin: auto;
}

.header .inner {
    max-width: 970px;
    margin: auto;
    padding: 0 1%;
}

.footer .inner {
    margin: auto;
    max-width: 970px;
}

.page_body, div.header-fullsize { padding: 0; }

header .inner, footer .inner { padding: 1% 2%; }

div.footer_quicklinks {
    display: inline;
    float: left;
    clear: right;
    width: 31%;
    padding: 1%;
}


/* ================ 5. Clearfix and Clearing ================ */

.clearfix:before, .clearfix:after, .fix:before, .fix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix:after, .fix:after { clear: both; }

.clearfix, .fix { zoom: 1; }

.clear { clear: both; }

.clearleft { clear: left; }

.clearright { clear: right; }

/* ================ 6. Floating ================ */

.left { float: left; }

.right { float: right; }

/*================= 7. Show or hide for varying screen sizes =================*/



.col2 .sidebar, .tabbedca-title { display: none !important; }

/* don't display promotions in the main content column (yet)*/

.col1-wide .sidebar, .col2 .sidebar, .col2-wide .sidebar { display: none; }

/* ================ 8. Header Elements ================ */
div.logo {
    position: relative;
    z-index: 10;
}

/*dont display the mobile header by default*/
div.header-mobile { display: none; }

div.header-mobile div.header-bar a { padding: 12px 0px 11px 10px; }

div.header-mobile div.header-bar a.menu-icon {
    font-size: 27px; font-size: 1.6875rem;
    /* height: 32px; */
    background-color: #333;
    width: 36px;
}

header div.search { margin: 5px 0 !important; }

div.topnav {
    position: relative;
    z-index: 10;
} /*troubleshoot with inline block*/

.search-box {
    width: 0px;
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    -o-transition: width .5s ease;
    transition: width .5s ease;
}

/*.search-box input#searchform {display:none;}
.search-box-open input#searchform {display:block;}*/
  
.search-box-open { width: 160px; }

.header-mobile div.search .search-box-open { width: 88%; }

.search-box {
    position: relative;
    background-color: #fff;
    float: right;
    display: inline-block;
    z-index: 0;
}

input.search_field {
    padding: 0 8px !important;
    height: 32px;
    width: 85%;
    margin: 0;
    border: none !important;
    background: none !important;
    color: #777;
    box-shadow: none !important;
}

button.search-button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: #fff;
    float: right;
    display: inline-block;
    padding: 8px;
    background-color: #333;
    height: 32px;
    width: 32px;
    position: relative;
    z-index: 11;
    font-size: 16px; font-size: 1rem;
}

input.search_field, a.search-button { max-height: 50px !important; }

.header-mobile div.search {
    display: block !important;
    margin: 0 !important;
}

.header-mobile div.search button.search-button {
    height: 50px;
    width: 12%;
    float: right;
}

.header-mobile div.search { width: 100%; }

.header-mobile div.search .search-box {
    height: 50px;
    float: right;
}

.header-mobile div.search .search-box input.search_field {
    height: 50px;
    font-size: 1.1em;
}

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

/*show the mobile menu now*/
div.header-mobile { display: block; }


/*remove the top, split and main nav because they are all accomodated in the mobile menu*/
div.topnav, div.nav-split, div.nav-main, header .inner div.search { display: none; }

.col1-wide .sidebar, .col2 .sidebar, .col2-wide .sidebar { display: block; }

button.search-button { font-size: 20px; font-size: 1.25rem;}
}

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

div.header-mobile div.header-bar div.onethird { width: 15% !important; }

div.header-mobile div.header-bar div.twothirds { width: 85% !important; }
}

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

.header-mobile div.search .search-box-open { width: 82%; }

.header-mobile div.search button.search-button { width: 18%; }
}

/* ================ 9. Homepage Elements ================ */

/*9.1 Homepage Banners*/

.banners {max-width:970px; margin:1% auto; padding: 0;}

.banners .inner {padding:0 1%;}


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


}

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


/*tighten up the type on tabs for tabbed content areas*/
div.ca_tabs ul li a { letter-spacing: -1px; }
}

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



.col2 .sidebar, .col2-wide .sidebar, .col2 .subnav, .col2-wide .subnav, .col2-left .sidebar { display: block; }
}

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

/*.home_banner .banner-home-inner {padding:50px 20px 10px;}*/
.home_banner .banner-home-inner h2 {
    margin: 0 0 60px 0;
    font-size: 2.3em;
}

.home_banner .banner-home-inner h3 {
    margin: 35px 0;
    font-size: 1.5em;
}

.home_banner .banner-home-inner a.button {
    margin: 0;
    display: inline;
}
}

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

.home_banner .banner-home-inner { padding: 30px 20px 10px; }

.home_banner .banner-home-inner h2 {
    margin: 0 0 60px 0;
    font-size: 2em;
}

.home_banner .banner-home-inner h3 {
    margin: 55px 0;
    font-size: 1.3em;
}

.home_banner .banner-home-inner a.button {
    margin: 0;
    display: inline;
}
}

/* 9.2 Homepage Login  */

div.home_login { }

div.home_login_inner label {
    max-width: 200px;
    margin: 0;
}

div.home_login_inner input[type="text"], div.home_login_inner input[type="password"] { width: 100%; }

div.home_login_inner div.form-field {
    margin: 0;
    padding: 0;
}

div.home_login_inner div.form-field input { margin-bottom: 5px; }

div.home_login_inner div.form-field.submit {
    float: right;
    width: auto;
    height: 35px;
    padding-top: 0;
    margin: 0;
}

/*9.3 Homepage content areas */
.home_content_area {
    float: left;
    width: 32.63%;
    margin: auto;
}

.ca_inner { padding: 10px; }

/* ================ 10. General Responsive Elements ================ */

img, iframe { max-width: 100%; }

/* 10.2 Smaller than 1280 wide but larger than 768 wide */
@media screen and (max-width: 1280px) and (min-width: 768px) {
}

/* 10.3 Smaller than 1024 wide */ 
@media screen and (max-width: 1024px) {
}

/* 10.4 At least 768 wide */
@media screen and (min-width: 769px) {
}

/* 10.5 Between 640 wide and 768 wide */
@media screen and (min-width: 641px) and (max-width: 768px) {
}

/* 10.6 Smaller than 768 wide */
@media screen and (max-width: 768px) {

/*	Interior page layout responsive...*/
div.nav-main ul { display: block; }

/*homepage primary content areas change to decked layout*/
.home_content_area {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-right: none;
    clear: both;
}

/*tabbed content areas converted to non-tabbed areas*/
div.ca_tabs { display: none; }

div.ca_panel {
    display: block !important;
    visibility: visible !important;
}

/*re-layout regular content areas*/



.tabbedca-title { display: block !important; }

.mainnav-col #subnav_div { display: block; }

div.nav-sub {
    margin: 0 0 30px 0 !important;
    padding: 5px 0 0 0;
}

.mainnav-col #subnav_div .nav-sub h3 { display: none; }

.mainnav-col #subnav_div .nav-sub ul.nav-menu li.nav-item {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin: 0 1%;
}

div.nav-sub ul.nav-menu li.nav-item a { width: auto !important; }

div.nav-sub ul.nav-menu li.nav-item a:hover { }

div#calloutlink a { font-size: 95% !important; }
}

/* 10.7 Smaller than 767 wide */
	@media screen and (max-width: 767px) {

	/*=========== hide col3 and widen col2 ===========*/
	.col1 { display: none; }

	.col1-wide, .col2, .col2-wide, .col2-left {
	    width: 100%;
	    clear: both;
	    border-right: none;
	}

	.col3 { display: none; }

	/*=========== display sidebar in col2, not col1 or col3 ===========*/

	.col1-wide .sidebar, .col2 .sidebar, .col2-wide .sidebar {
	    display: block !important;
	    margin: 3em 0 0 0;
	}

	.col1 .sidebar, .col3 .sidebar { display: none !important; }

	.header .inner {
	    border-bottom: none;
	    padding: 10px 0 0 0;
	}

	.header-info-main, div.megamenu { display: none; }

	.header-info-mobile { display: block; }

	nav.menu-main { }

	nav.menu-mobile { }

	input.search_field, input.search_active {
	    float: none;
	    width: 100%;
	}

	div.search_form input.submit, a.search_button { }

	.header .inner .col2-head, .header .inner .col2 {
	    float: left;
	    width: 100%;
	    margin: auto;
	}

	header {
	    width: 100% !important;
	    max-width: 100%;
	}

	header .col1-head { width: 100%; }

	div.nav-top {
	    margin: 4px 0;
	    text-align: center !important;
	    clear: both;
	    width: auto !important;
	}

	div.header-info-mobile { text-align: center; }

	div.header-info-mobile .head-phone {
	    display: inline-block;
	    text-align: left;
	    padding: 0;
	    margin: 0 6px;
	}

	div.search_form { }

	div.logo {
	    background-position: center;
	    margin: 1% auto !important;
	    width: 100% !important;
	    clear: both;
	    position: relative;
	    z-index: 10;
	}

	div.logo a {
	    margin: auto;
	    width: 100% !important;
	    margin: 0 !important;
	}

	.footer-left, .footer-right {
	    float: left;
	    padding: 1em 0;
	}

	.footer-left, .footer-right { width: 75%; }

	.footer-right {
	    width: 25%;
	    text-align: right;
	    float: right;
	}
	}

/* 10.7 Smaller than 640 wide */
@media screen and (max-width: 768px) {

.footer .inner .footer-left, .footer .inner .footer-right {
    width: 100%;
    clear: both;
}

.footer-left, .footer-right { padding: 0 0 10px 0; }

div.footer_quicklinks {
    width: 98%;
    margin: 10px 0;
}

div.footer div.meta, div.footer div.copyright {
    text-align: center;
    padding: 0 1em;
}

div.footer_quicklinks ul li {
    display: inline-block;
    padding: 0 10px;
    border-right: 1px solid #ccc;
}

div.footer_quicklinks ul li:last-child { border-right: none; }
}

/* 10.8 Smaller than 480 wide */
@media screen and (max-width: 480px) {

/*home banking login area*/
div.home_login { min-height: 200px; }

div.home_login_inner div.form-field.login { width: 100%; }

div.home_login_inner label, div.home_login_inner input[type=text], div.home_login_inner input[type=password] { width: 96%; }

div.home_login_inner div.form-field.submit {
    float: right;
    width: 73px;
    height: 35px;
    padding-top: 0;
    margin: 0;
    clear: both;
}

div.home_login_inner .hblinks { margin: 0; }

/*.tinynav { display: block; margin:auto !important; background-color: #444; color: #fff; background-image:none; border: solid 1px #666; width:270px;}
    #main-nav { display: none }*/

div.nav-split ul.nav-menu li.nav-item a { font-size: 1em; }

div.main_nav_phone { display: none; }

div.main_nav_phone div.nav-sub { margin: -20px 0 30px; }

div.main_nav_phone .nav-sub h3 { display: none; }

.footer_bottom .inner .footer-left, .footer_bottom .inner .footer-right {
    width: 100%;
    clear: both;
}

.mainnav-col #subnav_div, .col2 { }

.ratehead .rate_date {
    clear: left;
    float: left
}

#contact_form div.form-field .left {
    clear: right;
    width: 100%
}

#contact_form div.form-field .right {
    float: left;
    width: 100%
}

#contact_form div.form-field .right input[type=text], #contact_form div.form-field .right input[type=tel], #contact_form div.form-field .right input[type=password], #contact_form div.form-field .right input[type=email], #contact_form div.form-field .right textarea, #contact_form div.form-field .right select { width: 100% }

#contact_form div.form-field .right input.formkey {
    width: 20%;
    float: left;
}

input.button, input[type=submit], a.button, a.button:link {
    display: block;
    width: auto;
}
}

/* 10.9 Smaller than 400 wide */
@media screen and (max-width: 400px) {

ul#main-nav li.nav-item a { font-size: 1.8em; }

div.nav-main ul { width: 100% !important; }

input.search_button { left: 2px; }
}
/* flexible iframe style */
.flexiframe {position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0; overflow: auto; -webkit-overflow-scrolling:touch; border: none;}
.flexiframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;    max-width: 100% !important; border: none !important; padding: 0; margin: 0;}