/*JP 5-1-2013*/

/*CONTENTS:

This sheet should contain any styles that apply to any BIT templates
_____________________________________________________________
1. Banners
    1.1 BANNER BASICS FOR SIZE AND IMAGE POSITIONING
    1.2 PLAIN BANNER DESIGN
    1.3 TRANSPARENT BAR BANNER DESIGN
    1.4 BANNER theme 1 - content left
    1.5 BANNER theme 2 - content right
    1.6 BANNER text color options
    1.7 BANNER RESPONSIVENESS
    1.8 BANNER tweaks to allow for onling banking login on HP
    
2. Sidebar Promotions

3. Calls to Action
4. Mega Menu Design

*/


/*1. Banners*/


/*=========== 1.1 BANNER BASICS FOR SIZE AND IMAGE POSITIONING ===========*/


.outer-slide {
    overflow: hidden;
    max-width: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 340px; /* height: 585px; */ 
}
.cfcuniverse .outer-slide { height: 340px;}

.banner_body {
    min-height: 200px;
    padding-bottom: 50px !important; /*make room for the banner nav circles*/
    background-repeat: repeat-y;
}

.banner_body h2 {
    font-size: 2em; line-height: 1em;
}
.banner_body h3 { font-size: 1.2em; }

.banner_copy {
    width: 50%;
    font-size: 0.9em;
    margin: 0 0 12px 0;
}

.banner_copy ul {
    margin: 0;
    padding: 0 20px;
}

.banner_copy ul li { padding: 2px; }


.banner_copy strong, .banner_copy b { }


.contentbar {display:table; width:100%; position:relative;}
.contentbar .inner-content { vertical-align:bottom;}



/*=========== 1.2 PLAIN BANNER DESIGN ===========*/


.plain-banner .banner_body {
    padding: 3%;
}


/*if this is a "plain" banner, make the headlines and call to action buttons on themes 1 and 2 only 60% of the width and clear them*/

.plain-banner .banner_body.theme1 h2, .plain-banner .banner_body.theme2 h2, .plain-banner .banner_body.theme3 h2, .plain-banner .banner_body.theme4 h2, .plain-banner .banner_body.theme1 h3, .plain-banner .banner_body.theme2 h3, .plain-banner .banner_body.theme3 h3, .plain-banner .banner_body.theme4 h3, .plain-banner .banner_body.theme1 div.cta_link, .plain-banner .banner_body.theme2 div.cta_link, .plain-banner .banner_body.theme3 div.cta_link, .plain-banner .banner_body.theme4 div.cta_link {
    width: 60%;
    clear: both;
    margin: 0 0 2%;
}

/*vertically align the transparent bar based on the bit selection (works differently for transbar banners)*/
.plain-banner .banner_body {width:94.2%; /* min-height:300px; */ min-height:470px;}
.cfcuniverse .plain-banner .banner_body {min-height:255px;}
.plain-banner .banner_body .contentbar {}

.plain-banner .banner_body .contentbar .inner-content {display:block;}

.plain-banner .vert-top .contentbar {vertical-align:top;}
.plain-banner .vert-mid .contentbar {vertical-align:middle; margin:0;}
.plain-banner .vert-bot .contentbar {vertical-align:bottom; margin:0 0 3% 0;}


/*=========== 1.3 TRANSPARENT BAR BANNER DESIGN ===========*/

 


/*if this is a "transparent bar" banner, make the headlines and call to action buttons on themes 1 and 2 100% wide*/

.transbar-banner .banner_body h2, .transbar-banner .banner_body h2, .transbar-banner .banner_body h3, .transbar-banner .banner_body h3, .transbar-banner .banner_body div.cta_link, .transbar-banner .banner_body div.cta_link, {
    width: 100%;
}

/*if this is a "transparent bar" banner, make this the style on headlines... */ 
.transbar-banner .banner_body h2, .transbar-banner .banner_body h3 {
   margin:2px; padding:0;
   text-shadow:none;
}

/*if this is a "transparent bar" banner, make this the style on call to action buttons / fancy buttons based on the text color selection */
 
.transbar-banner .banner_body div.cta_link {margin:8px 0;}

.transbar-banner .banner_body div.cta_link a {
    font-size:1em !important;
    padding:2px 8px !important;
}

.transbar-banner .banner_body div.cta_link a:hover {
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

.transbar-banner .banner_body.txt-light div.cta_link a {
    background-color: transparent;
    border: solid 1px #717e82;
    color:#717e82 !important;
}

.transbar-banner .banner_body.txt-light div.cta_link a:hover {
    background-color: #717e82;
    color:#fff !important;
}

.transbar-banner .banner_body.txt-dark div.cta_link a {
    background-color: transparent;
    border: solid 1px #003c79;
    color:#003c79 !important;
}

.transbar-banner .banner_body.txt-dark div.cta_link a:hover {
    background-color: #003c79;
    color:#fff !important;
}

/*if this is a "transparent bar" banner, apply a slightly transparent white background to the container surrounding the content using a png image */


.transbar-banner .contentbar {background-image:url(/img/banner-transbar-bg.png); width:100%; padding:0; margin:2% 0; }
.transbar-banner .contentbar .inner-content {padding: 2% 3%;}

.transbar-banner .contentbar {min-height:100px;}

/*vertically align the transparent bar based on the bit selection*/
.transbar-banner .vert-top .contentbar {top:0;}
.transbar-banner .vert-mid .contentbar {top:100px; margin:0;}
.transbar-banner .vert-bot .contentbar {top:160px; margin:0 0 3% 0;}

/*if this is a "transparent bar" banner, hide the banner copy field so that the bar is not too tall. */

.transbar-banner .banner_copy {display:none !important;}

/*=========== 1.4 BANNER theme 1 - content left ===========*/

/*things just default to left*/

.banner_body.theme1 {
   
}

/*=========== 1.5 BANNER theme 2 - content right ===========*/

.banner_body.theme2 .contentbar {
    text-align: right;
}


/*=========== 1.6 BANNER text color options ===========*/

.txt-light h2 { color: #fff; }
.transbar-banner .txt-light h2 { color: #717e82; }

.txt-light h3 { color: #eff5fa; }
.transbar-banner .txt-light h3 { color: #717e82; }

.txt-light .banner_copy { color: #eee; }

/*apply a text shadow to the copy in bits with the light text shade applied so it stands out on any image*/
.txt-light .banner_copy, .txt-light h2, .txt-light h3 { text-shadow: 2px 2px 20px #000; }


.txt-dark h2 { color: #003c79; }

.txt-dark h3 { color: #003c79; }

.txt-dark .banner_copy { color: #333; }


/*=========== 1.7 BANNER RESPONSIVENESS ===========*/

@media screen and (max-width: 700px) {
    
.banner_body h2 {
    font-size: 1.7em; line-height: 1em;
}
.banner_body h3 { font-size: 1em; }
    
    
    
    
}

@media screen and (max-width: 600px) {
    
.banner_body h2 {
    font-size: 1.7em; line-height: 1em;
}
.banner_body h3 { font-size: 1em; }
    
    
    
    
}








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

.outer-slide {
    background-position: top center;
    background-size: 115%;
    height: auto;
}
.cfcuniverse .outer-slide { height: auto;}

.banner_body {
    /* margin-top: 170px;*/ margin-top: 310px;
    min-height: 100px !important;
    padding-bottom: 40px;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.9);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.9);
    box-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.cfcuniverse .banner_body {margin-top: 255px;}

.banner_copy {
    width: 100%;
    font-size: 0.9em;
}

.banner_body.txt-light { background: #27649c; }
.banner_body.txt-light h2, .banner_body.txt-light h3, .banner_body.txt-light .banner_copy {color:#fff;}

.banner_body.txt-dark { background: #9bc1de; }
.banner_body.txt-dark h2, .banner_body.txt-dark h3, .banner_body.txt-dark .banner_copy {color:#003c79;}

.banner_body h2, .banner_body h3, .banner_copy, .cta_link { width: 100% !important; text-shadow:none !important; }

.transbar-banner .banner_body.txt-light div.cta_link a {
    background-color: transparent;
    border: solid 1px #fff;
    color:#fff !important;
}

/*.transbar-banner .banner_body.txt-light div.cta_link a:hover {
    background-color: #717e82;
    color:#fff !important;
}*/

/*.transbar-banner .banner_body.txt-dark div.cta_link a {
    background-color: transparent;
    border: solid 1px #fff;
    color:#fff !important;
}*/

/*.transbar-banner .banner_body.txt-dark div.cta_link a:hover {
    background-color: #003c79;
    color:#fff !important;
}*/

/*remove vertical alignment of the transparent bar */
.transbar-banner .vert-top .contentbar {top:0; margin:0;}
.transbar-banner .vert-mid .contentbar {top:0; margin:0;}
.transbar-banner .vert-bot .contentbar {top:0; margin:0;}

/*remove transparent background on the transparent bar */
.transbar-banner .contentbar {background-image:none; }



}

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

.banner_body { margin-top: 190px; }
}


/*=========== 1.8 BANNER tweaks to allow for onling banking login on HP ===========*/

.banner_body .inner-content {max-width:600px; margin-left:240px;}



@media screen and (max-width:800px) {
.banner_body .inner-content {max-width:600px; margin-left:210px;}
}

@media screen and (max-width:600px) {
.banner_body .inner-content {max-width:100%; margin-left:0px;}
}




















/*2. Sidebar Promotions*/
.promotion {
    color: #fff;
    padding: 10px;
    margin: 10px 0;
    background: #fff;
    border: solid 1px #5998c9;
}

.promotion p {
    color: #666;
    font-size: 16px !important; font-size: 1rem !important;
    line-height: 22px;
}

.promotion h2 {
    font-size: 27px; font-size: 1.6875rem;
    line-height: 32px;
    color: #ccc;
    margin: 0 0 0.3em 0;
}

.promotion.theme1, .promotion.theme1 p { color: #3c7aaf; }

.promotion.theme1 h2 {
    font-size: 32px;
    color: #5998c9;
    font-weight: 600;
}

.promotion.theme2 { border: solid 1px #f89521; }

.promotion.theme2 p { color: #f89521; }

.promotion.theme2 h2 {
    font-size: 32px; font-size: 2rem;
    color: #f89521;
    font-weight: 600;
}

.promotion.theme3 {
    color: #eff5fa;
    padding: 10px;
    margin: 10px 0;
    background: #27649c;
    border: solid 1px #99a3a6;
}

.promotion.theme3 p { color: #eff5fa; }

.promotion.theme3 h2 {
    font-size: 32px; font-size: 2rem;
    font-weight: 400;
    margin: 0.2em 0 0.3em 0;
    color: #fff;
}

.promotion.theme4 {
    color: #eff5fa;
    padding: 10px;
    margin: 10px 0;
    background: url(../img/pattern-bg.png);
    border: solid 1px #99a3a6;
}

.promotion.theme4 p { color: #eff5fa; }

.promotion.theme4 h2 {
    font-size: 32px; font-size: 2rem;
    font-weight: 400;
    margin: 0.2em 0 0.3em 0;
    color: #fff;
}

/*3. Calls to Action*/

div.cta a {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 10px;
    font-size: 1.25em;
    margin: 10px auto;
    text-align: center;
    color: #fff;
    display: block;
    text-decoration: none;
    font-weight: normal;
}

div.cta.theme1 a {
    background: #27649c;
    font-weight: 600;
    font-size: 1.5em;
}

div.cta.theme1 a:hover {
    background: #f89521;
    -webkit-transition: background .5s ease;
    -moz-transition: background .5s ease;
    transition: background .5s ease;
}

div.cta.theme2 a {
    background-color: #5998c9;
    color: #fff;
    border: none;
    text-align: center;
    font-weight: 300;
    font-size: 1.5em;
}

div.cta.theme2 a:hover {
    color: #e9e6e5;
    background-color: #2e516b;
    border: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

div.cta.theme3 a {
    background: #f89521;
    font-weight: 600;
    font-size: 1.5em;
}

div.cta.theme3 a:hover {
    background: #fde3c4;
    color: #27649c;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

div.cta.theme4 a {
    background: #f89521;
    font-weight: 600;
    font-size: 1.5em;
}

div.cta.theme4 a:hover {
    background: #003c79;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

div.cta.theme5 a {
    background: #99a3a6;
    font-weight: 600;
    font-size: 1.5em;
}

div.cta.theme5 a:hover {
    background: #cfd4d5;
    color: #27649c;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}

div.cta a:active {
    -moz-box-shadow: 0 0 6px #333 inset;
    -o-box-shadow: 0 0 6px #333 inset;
    -webkit-box-shadow: 0 0 6px #333 inset;
    box-shadow: 0 0 6px #333 inset;
}

/*4. Mega Menu Design*/



div.megamenu {
    width: 100%;
    max-width: 968px; /* min-height: 200px; */
    padding: 0;
    margin: 0;
    background: #eff5fa;
    border: solid 1px #5998c9;
    position: absolute;
    z-index: 10000;
    border-top: none;
}

div.megamenu a { color: #27649c; }

div.megamenu .megacol ul { margin-bottom: 1em; }

div.megamenu .megacol ul li a { font-weight: 600; }

div.megamenu .inner { padding: 2em; }

div.megamenu ul li {
    font-size: 1em;
    line-height: normal;
    padding: 0.3em 0;
}

div.megamenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

div.megamenu .megacol .inner { padding: 20px 30px 30px 30px !important; }

.megapromo { }

.megapromo h3 {
    margin: 0;
    padding: 0;
    font-size: 22px; font-size: 1.375rem;
    line-height: normal;
}

.megapromo h4 {
    margin: 3px 0;
    padding: 0;
    font-size: 18px; font-size: 1.125rem;
    line-height: normal;
}

.megapromo .megapromo-img {
    margin: 5px 0;
    padding: 0;
}

.megapromo .megapromo-content p {
    margin: 5px 0;
    padding: 0;
    font-size: 15px; font-size: 0.9375rem;
    line-height: 110%;
}

.megamenu .fancy-button a:link { font-size: 16px !important; font-size: 1rem !important;}

.megamenu.login {
    width: 300px;
    right: 0;
}

/*5. Loan Officers Layout*/

div.loan-officer {
    border-bottom: solid 1px #e3ebdf;
    margin: 0 0 2em 0;
}

div.loan-officer h2, div.loan-officer h3, div.loan-officer h4, div.loan-officer h5 { margin: 0 0 4px 0; }

.officer-image {
    width: 13.5699373695198%;
    padding-right: 2%;
}

.officer-head { width: 84.4300626304802%; }

div.loan-officer div.fancy-button a {
    text-align: center;
    margin-bottom: 1em;
}

div.loan-officer div.fancy-button { text-align: right; }

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

.officer-image {
    width: 23.6363636363636%;
    padding-right: 2%;
}

.officer-head { width: 74.3636363636364%; }
}

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

div.loan-officer div.fancy-button { text-align: left; }
}

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

.officer-image {
    width: 38.2352941176471%;
    padding-right: 2%;
}

.officer-head { width: 59.7647058823529%; }
}

.executive-team, .team-members { }

.executive-team .executive-team-member, .team-members .team-member {
    max-height: 450px;
    min-height: 420px;
}

.executive-team .executive-team-member .inner, .team-members .team-member .inner { padding: 0 10% 10%; }

.executive-team .executive-team-member h4, .executive-team .executive-team-member h5, .executive-team .executive-team-member h6, .team-members .team-member h4, .team-members .team-member h5, .team-members .team-member h6 {
    margin: 0 0 4px 0;
    line-height: normal;
}

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

.executive-team .executive-team-member, .team-members .team-member {
    max-height: none;
    min-height: 390px;
}
}

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

.executive-team .executive-team-member, .team-members .team-member {
    max-height: none;
    min-height: 370px;
}
}

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

.executive-team .executive-team-member, .team-members .team-member {
    max-height: none;
    min-height: 420px;
}
}

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

.executive-team .executive-team-member, .team-members .team-member {
    max-height: none;
    min-height: 380px;
}
}

.community-activities .community-activity {
    box-shadow: 0 0 3px #ccc;
    margin: 3% 0;
    padding: 3%;
    background-color: #f7f8f8;
}

.community-activities .community-activity h3 { margin: 0 0 4px 0; }


/*---------Single Column Color Bar Blocks---------*/

.content.color-bars p { margin: 0; } /*this is actually part of the page template and not the bit*/

.content-bar {
    background-color: #efefef;
    padding: 2em 1em;
    clear: both;
}

.content-bar .inner {
    max-width: 990px;
    margin: auto;
	padding: 20px 10px;
}

.content-bar h2 {
    font-size: 42px; font-size: 2.625rem;
    color: #1c1c1c;
    margin: 0 0 0.2em 0;
}

.content-bar h3 {
    font-size: 27px; font-size: 1.6875rem;
    color: #004b62;
    margin: 0 0 0.4em 0;
}

.content-bar.content-center { text-align: center; }

.content-bar.content-center ul li { padding: 0.2em 0; }

.content-bar.content-center ul li:before { content: none; }

/*light gray background (default)*/
.content-bar.theme1 { background-color: #f4f5f3; }
.content-bar.theme1 .huge {color: #2e516b;}
.content-bar.theme1 .tiny {color: #bbb; }

/*light blue background*/
.content-bar.theme2 { background-color: #5998c9; }
.content-bar.theme2 h2 {    font-size: 42px; font-size: 2.625rem;   color: #fff;}
.content-bar.theme2 h3 {    font-size: 27px; font-size: 1.6875rem;   color: #5998c9;}
.content-bar.theme2 p { color: #efefef; }

/*dark blue background*/
.content-bar.theme3 { background-color: #2e516b; }
.content-bar.theme3 h2 { color: #fff; }
.content-bar.theme3 h3 { color: #2e516b; }
.content-bar.theme3 p { color: #fff; }

/*orange background*/
.content-bar.theme4 	{ background-color: #f89521; }
.content-bar.theme4 h2 	{ color: #ffffff; }
.content-bar.theme4 h3 	{ color: #ffffff; }
.content-bar.theme4 h4 	{ color: #ffffff; }
.content-bar.theme4 p 	{ color: #ffffff; }

/*white background*/
.content-bar.theme5 { background-color: #fff; }

/*---------Multi-Column Color Bar Blocks---------*/

.content-bar.onehalf, .content-bar.onethird, .content-bar.onefourth, .content-bar.onefifth {width:auto !important;}

/*if two columns is selected, don't display columns 3, 4 and 5*/
.content-bar.onehalf .multicol3, .content-bar.onehalf .multicol4, .content-bar.onehalf .multicol5 {display:none;}

/*if three columns is selected, don't display columns 4 and 5*/
.content-bar.onethird .multicol4, .content-bar.onethird .multicol5 {display:none;}

/*if four columns is selected, don't display column 5*/
.content-bar.onefourth .multicol5 {display:none;}


/*apply offset column widths*/

.content-bar.onethird-twothirds .multicol1 {width:33.333% !important;}
.content-bar.onethird-twothirds .multicol2 {width:66.666% !important;}

.content-bar.onefourth-threefourths .multicol1 {width:25% !important;}
.content-bar.onefourth-threefourths .multicol2 {width:75% !important;}



.content-bar.onethird-twothirds .multicol3, .content-bar.onethird-twothirds .multicol4, .content-bar.onethird-twothirds .multicol5   {display:none;}
.content-bar.onefourth-threefourths .multicol3, .content-bar.onefourth-threefourths .multicol4, .content-bar.onefourth-threefourths .multicol5   {display:none;}

/*fix for Chrome's missing banner text */
.flexslider .slides > li { -webkit-perspective: 990;}




/*intranet specific styles*/

/*role specific content show / hide*/
.role-specific {display:none;}
.executive-role.executive {display:block !important;}
.mmr-role.mmr {display:block !important;}
.teller-role.teller {display:block !important;}
.mortgage-role.mortgage {display:block !important;}
.mmr-two-and-three-role.mmr-two-and-three {display:block !important;}
.accounting-role.accounting {display:block !important;}
.general-role.general {display:block !important;}
.asset-role.asset {display:block !important;}
.building-and-grounds-role.building-and-grounds {display:block !important;}
.compliance-role.compliance {display:block !important;}
.human-resources-role.human-resources {display:block !important;}
.imaging-role.imaging {display:block !important;}
.it-role.it {display:block !important;}
.lending-role.lending {display:block !important;}
.loan-servicing-role.loan-servicing {display:block !important;}
.outbound-call-center-role.outbound-call-center {display:block !important;}
.product-and-service-development-role.product-and-service-development {display:block !important;}
.training-role.training {display:block !important;}
.marketing-role.marketing {display:block !important;}
.legal-role.legal {display:block !important;}
.commercial-lending-role.commercial-lending {display:block !important;}
.support-services-role.support-services {display:block !important;}
.purchasing-role.purchasing {display:block !important;}
.wealth-management-role.wealth-management {display:block !important;}
.branch-manager-role.branch-manager {display:block !important;}
.call-center-role.call-center {display:block !important;}
.head-teller-role.head-teller {display:block !important;}
.audit-role.audit {display:block !important;}
.security-and-fraud-role.security-and-fraud {display:block !important;}






/* 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;}

/*adjusted after banner height change */
.flex-control-nav {bottom: 10px !important;}