/* CSS Document */ /* Level 9 Voice Website "site.css" structure: =.= Reset, Accessibility and Standard HTML elements =.= CONTENT STYLES =.= TINY MCE Selectable Styles =.= Custom Colors =.= Standardized Color Values =.= Form Placeholder Colors ------ =.= Layout Framework =.= Form Framework =.= Conventional Content Decks (BIT TYPE) =.= Featured Rate & Icon Decks (BIT TYPE) =.= Featured Prod/Serv Content Decks (BIT TYPE) =.= Step List Content Decks (BIT TYPE) ------ =.= Custom Button Styling =.= Calls to Action (BIT TYPE) =.= Promotions & Testimonials (BIT TYPE) =.= Cross Selling Promo Blocks ------ =.= Quick Text Formatting =.= Show/Hide and Other Display Visuals ------ =.= Site Layout Elements =.= Mobile Header / Menu =.= Header Elements =.= OPEN =.= Online Banking Login ------ =.= Footer Elements =.= Footer Quicklinks (BIT TYPE) =.= Navigation =.= Mega Menus =.= Dropdown Menus =.= Top Navigation =.= Sub-Navigation (in-page) =.= Sticky Menu =.= Alerts =.= Speedbumps =.= Sitemap =.= FAQ's =.= Responsive Lists =.= Posts / Post Lists / Post Images =.= Seminars / Events =.= Site Banners =.= Flexslider =.= VOICE Banners (BIT TYPE) =.= Video Banners (BIT TYPE) =.= Offset Banners =.= JQuery Style Overrides & Ajax Elements =.= Google Search or Voice Search Integration =.= OPEN =.= Flexible Iframe & Responsive Videos =.= Tabbed Content Areas ------ =.= Rate Tables =.= Featured Rates and Featured Icons (BIT TYPE) =.= Comparison Charts (BIT TYPE) =.= Staff Listings (BIT TYPE) =.= Level 9 Calculators =.= Google Maps (BIT TYPE) =.= Commenting and Rating =.= Surveys and Polls =.= Personalized / Location Based Content ------ =.= Custom CSS Additions ------ */ /* NEW VARIABLE VERSION font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; */ html { /* Setting the font-size at document level using an absolute unit overwrites the user's browser settings, so this must be relative -- do not change */ font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { font-family: Montserrat, sans-serif; font-weight: normal; font-style: normal; font-size: 16px; font-size: 1rem; line-height: 1.5; background-color: #ffffff; margin: 0; color: #000000; position: relative; z-index: 0; min-height: 100%; height: 100%; } /* -------------- =.= Reset and Accessibility -------------- */ img, iframe { max-width: 100%; } pre, abbr, acronym, address, cite, code, del, dfn, em, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, div.form-field, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; /* removed display and zoom */ } audio:not([controls]) { display: none; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; -ms-interpolation-mode: bicubic; } button, input { line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; vertical-align: top; } b, strong {font-weight: 700;} /* skip navigation link for accessibility - explainded here: http://webaim.org/techniques/skipnav/ */ #skip a, #skip a:hover, #skip a:visited { position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden; } #skip a:active, #skip a:focus { position: static; width: auto; height: auto; } .hidden, .hide { display: none; } /*class to hide content so it is just for screen readers*/ .just-sr { position: absolute; display: block; left: -10000px; top: auto; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } p { line-height: 1.5; margin: 0 0 20px 0; } p:empty, .content:empty { display: none; } sup { font-size: 60%; } /* custom bulleted lists */ .content ul {list-style-type: none; margin-top: 0; margin-bottom: 30px;} .content ul>li, .deckinner ul>li { margin: 20px 20px; padding-left: 0; } .content ul li:before { content: ''; display: inline-block; width: 20px; height: 23px; background-image: url("chevron-right-black.svg"); background-size: contain; background-repeat: no-repeat; margin-left: -25px; margin-right: 10px; transform: translateY(10px); filter: invert(32%) sepia(21%) saturate(3480%) hue-rotate(146deg) brightness(103%) contrast(102%); } .content .contentdeck.brandcolor ul li:before { filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(210deg) brightness(107%) contrast(101%); /* white */ } .content .contentdeck.brandcolor.boxed-deck ul li:before { filter: invert(32%) sepia(21%) saturate(3480%) hue-rotate(146deg) brightness(103%) contrast(102%); /* blue */ } .content .contentdeck.brandcolor.boxed-columns ul li:before { filter: invert(32%) sepia(21%) saturate(3480%) hue-rotate(146deg) brightness(103%) contrast(102%); /* blue */ } /* bullet overrides for elements that shouldn't have the logo bullets */ .content ul.sitemaplist li:before, .content ul.faq-list li:before, .content td.ratefootnote ul li:before, .content ul.poll_qa li:before, .content ul.fieldsets li:before , .content ul#stars li:before, .content ul.nav-menu li:before, .content div.pagination-holder ul li:before, .content .vertical_slider ul li:before, .content .slick-dots li:before { display: none;} /* -------------- =.= CONTENT STYLES -------------- */ /* ********* MUST ALSO BE DUPLICATED IN /CSS/EDITOR.CSS SO THAT TINYMCE CAN UTILIZE THEM ********* */ a:link{ color: #244B5A; text-decoration: underline; } a:visited { color: #000000; text-decoration: underline; } a:hover, a:active { color: #007D80; text-decoration: none; } h1, h2, h3, h4, h5, h6 { /*this is where all site headings are customized*/ margin: 10px 0 20px 0; line-height: 1.2; font-weight: 700; font-family: Montserrat, sans-serif; color: #244B5A; } h1 { font-size: 4.25rem; color: #244B5A; } h2 { font-size: 2.5rem; color: #244B5A; } h3 { font-size: 1.625rem; color: #244B5A; margin: 40px 0 10px 0; } h4 { font-size: 1.375rem; color: #244B5A; } h5 { font-size: 1.125rem; color: #244B5A; } h6 { font-size: 1.0625rem; color: #244B5A; } .content a {overflow-wrap: break-word;} ::placeholder { color: #102B3F; font-size: 1rem;} /* custom interior page titles */ /* mockup had 223A76 */ div.custom-page-title {background-color: #A12D4D; padding: 30px 20px; margin: 40px 0; text-align: center;} h1.page-title {color: #fff; line-height: 1; margin: 0 auto; max-width: 1440px; text-shadow: 0 0 2px rgba(0,0,0,0.3); font-size: 3.25rem;} /* Interior page-title only banners - custom to Hanscom */ div.custom-page-title.page-title-large h1.page-title {font-size: 6.25rem; line-height: 1.1;} div.custom-page-title.page-title-default h1.page-title {font-size: 3.25rem; line-height: 1;} div.custom-page-title.page-title-medium h1.page-title {font-size: 2.75rem; line-height: 1.1;} div.custom-page-title.page-title-small h1.page-title {font-size: 2.25rem; line-height: 1.1;} div.custom-page-title {position: relative;} /*.custom-page-title:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background: linear-gradient(to bottom, rgba(0,0,0,0.50) 0%,rgba(255,255,255,0) 130px); }*/ div.custom-page-title.white {background-color: #fff;} div.custom-page-title.geyser { background-color: #DCE4E2; } div.custom-page-title.firefly { background-color: #000000; } div.custom-page-title.blue-dianne { background-color: #244B5A; } div.custom-page-title.eminence { background-color: #EF4636; } div.custom-page-title.saffron { background-color: #FEBE2C; } div.custom-page-title.st-tropaz { background-color: #007D80; } div.custom-page-title.monarch { background-color: #A12D4D; } div.custom-page-title.pelorous { background-color: #00A9BC; } div.custom-page-title.azure-geyser { background-color: #B2BEDC; } /* adjustments to each gradient for vibrancy */ div.custom-page-title.white:after {background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(255,255,255,0) 100%);} div.custom-page-title.geyser:after {background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(255,255,255,0) 100%);} div.custom-page-title.firefly:after {background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(255,255,255,0) 130px); } div.custom-page-title.blue-dianne:after {background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(255,255,255,0) 130px);} div.custom-page-title.eminence:after {background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(255,255,255,0) 130px);} div.custom-page-title.saffron:after {background: linear-gradient(to bottom, rgba(153,120,0,0.7) 0%,rgba(255,255,255,0) 130px);} div.custom-page-title.st-tropaz:after {background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(255,255,255,0) 130px);} div.custom-page-title.monarch:after {background: linear-gradient(to bottom, rgba(119,24,38,1) 0%,rgba(255,255,255,0) 130px); } div.custom-page-title.pelorous:after {background: linear-gradient(to bottom, rgba(38,105,126,0.8) 0%,rgba(255,255,255,0) 130px);} div.custom-page-title.azure-geyser:after {background: linear-gradient(to bottom, rgba(43,114,136,0.9) 0%,rgba(255,255,255,0) 130px); } /* swapping to dark font for light backgrounds */ div.custom-page-title.white h1.page-title { color: #244B5A; text-shadow: none;} div.custom-page-title.geyser h1.page-title { color: #244B5A; text-shadow: none;} div.custom-page-title.azure-geyser h1.page-title { color: #244B5A; text-shadow: none;} @media screen and (max-width: 767px) { div.custom-page-title h1.page-title {font-size: 2.5rem !important; line-height: 1 !important;} } .content p {line-height: 1.75;} /* -------------- =.= TINY MCE Selectable Styles -------------- */ /******* CONTENT STYLES MUST ALSO BE DUPLICATED IN /CSS/EDITOR.CSS SO THAT TINYMCE CAN UTILIZE THEM -- STYLES CAN BE ADDED OR CHANGED IN /admin/scripts/admin_tinymce_init.js *****/ .intro { font-size: 1.75rem; color: #007D80; line-height: 1.2; } .red { color: #950609; } .blue-dianne { color: #244B5A; } .huge { font-size: 3.125rem; } .large { font-size: 2.1875rem; } .medium { font-size: 1.5rem; } .small { font-size: 0.875rem; } .tiny { font-size: .7rem; line-height: 1.5; display: inline-block; } .montserrat { font-family: 'Montserrat', sans-serif; } /*=== END Editor Styles ===*/ /*=== Other styles used by TINYMCE ===*/ /* Image alignment and formatting */ img.img_onethird { width: 33.333333%; } img.img_onehalf { width: 50%; } img.img_twothirds { width: 66.666666%; } img.img_full { min-width: 100%; } img.alignleft { float: left; margin: 0 20px 10px 0; } img.alignright { float: right; margin: 0 0 10px 20px; } img.alignnone { float: none; } img.border1, img.border2, img.border3, img.border4, img.border5 { border-color: #333; } img.border0 { border: none; } img.border1 { border: solid 1px; } img.border2 { border: solid 2px; } img.border3 { border: solid 3px; } img.border4 { border: solid 4px; } img.border5 { border: solid 5px; } /* -------------- =.= Custom Colors -------------- */ /* -------------- =.= Standardized Color Values NOT UPDATED-------------- */ /* Color 1 */ .clr1-dark { color: #335C81 !important; } .clr1-bg-dark { background-color: #335C81 !important; } .clr1-bdr-dark { border-color: #335C81 !important; } /* Color 2 */ .clr1-med { color: #BAD8FF !important; } .clr1-bg-med { background-color: #BAD8FF !important; } .clr1-bdr-med { border-color: #BAD8FF !important; } /* Color 3 */ .clr1-lite { color: #EBF9FF !important; } .clr1-bg-lite { background-color: #EBF9FF !important; } .clr1-bdr-lite { border-color: #EBF9FF !important; } /* Color 4 */ .clr2-dark { color: #4E5157 !important; } .clr2-bg-dark { background-color: #4E5157 !important; } .clr2-bdr-dark { border-color: #4E5157 !important; } /* Color 5 */ .clr2-med { color: #B7BDCC !important; } .clr2-bg-med { background-color: #B7BDCC !important; } .clr2-bdr-med { border-color: #B7BDCC !important; } /* Light Gray - Overcast */ .clr2-lite { color: #F4F7FF !important; } .clr2-bg-lite { background-color: #F4F7FF !important; } .clr2-bdr-lite { border-color: #F4F7FF !important; } th.clr1-bg-dark, th.clr1-bg-med, th.clr2-bg-dark, th.clr2-bg-med { color: #fff !important; } td.clr1-bg-dark, .clr1-bg-dark div, .clr1-bg-dark p, .clr1-bg-dark a, td.clr1-bg-med, .clr1-bg-med div, .clr1-bg-med p, .clr1-bg-med a, td.clr2-bg-dark, .clr2-bg-dark div, .clr2-bg-dark p, .clr2-bg-dark a, td.clr2-bg-med, .clr2-bg-med div, .clr2-bg-med p, .clr2-bg-med a, .clr1-bg-dark h1, .clr1-bg-dark h2, .clr1-bg-dark h3, .clr1-bg-dark h4, .clr1-bg-dark h5, .clr1-bg-dark h6, .clr2-bg-dark h1, .clr2-bg-dark h2, .clr2-bg-dark h3, .clr2-bg-dark h4, .clr2-bg-dark h5, .clr2-bg-dark h6, .clr1-bg-med h1, .clr1-bg-med h2, .clr1-bg-med h3, .clr1-bg-med h4, .clr1-bg-med h5, .clr1-bg-med h6, .clr2-bg-med h1, .clr2-bg-med h2, .clr2-bg-med h3, .clr2-bg-med h4, .clr2-bg-med h5, .clr2-bg-med h6 { color: #fff !important; } .clr1-bg-dark a:link, .clr1-bg-dark a:visited, .clr1-bg-med a:link, .clr1-bg-med a:visited, .clr2-bg-med a:link, .clr2-bg-med a:visited, .clr2-bg-dark a:link, .clr2-bg-dark a:visited { color: #fff; } .clr1-bg-dark .intro, .clr1-bg-med .intro, .clr2-bg-med .intro, .clr2-bg-dark .intro { color: #fff; } /* Chartreuse */ .accent-dark { color: #70A200 !important; } .accent-bg-dark { background-color: #70A200 !important; } .accent-bdr-dark { border-color: #70A200 !important; } /* -------------- =.= Layout Framework -------------- */ /* -------------- =.= Column Layouts -------------- */ /*1.1 Percentage based columns*/ .onewhole { width: 100%; } .onehalf { width: 50%; } .onethird { width: 33.333333%; } .twothirds { width: 66.666666%; } .onefourth { width: 25%; } .threefourths { width: 75%; } .onefifth { width: 20%; } .twofifths { width: 40%; } .threefifths { width: 60%; } .fourfifths { width: 80%; } .onesixth { width: 16.666666666666667%; } .fivesixths { width: 83.33333333333334%; } .oneseventh { width: 14.28571428571429%; } .twosevenths { width: 28.57142857142858%; } .threesevenths { width: 42.85714285714287%; } .foursevenths { width: 57.14285714285716%; } .fivesevenths { width: 71.42857142857145%; } .sixsevenths { width: 85.71428571428574%; } .oneeighth { width: 12.5%; } .twoeights { width: 25%; } /*same as .onefourth*/ .threeeighths { width: 37.5%; } .foureighths { width: 50%; } /*same as .onehalf*/ .fiveeighths { width: 62.5%; } .sixeighths { width: 75%; } /*same as .threefourths*/ .seveneighths { width: 87.5%; } .oneninth { width: 11.11111111111111%; } .twoninths { width: 22.22222222222222%; } .threeninths { width: 33.33333333333333%; } /*same as .onethird*/ .fourninths { width: 44.44444444444444%; } .fiveninths { width: 55.55555555555555%; } .sixninths { width: 66.66666666666666%; } /*same as .twothirds*/ .sevenninths { width: 77.77777777777777%; } .eightninths { width: 88.88888888888888%; } .onetenth { width: 10%; } .twotenths { width: 20%; } /*same as .onefifth*/ .threetenths { width: 30%; } .fourtenths { width: 40%; } /*same as .twofifths*/ .fivetenths { width: 50%; } /*same as .onehalf*/ .sixtenths { width: 60%; } /*same as .threefifths*/ .seventenths { width: 70%; } .eighttenths { width: 80%; } /*same as .fourfifths*/ .ninetenths { width: 90%; } .oneeleventh { width: 9.09090909090909%; } .twoelevenths { width: 18.18181818181818%; } .threeelevenths { width: 27.27272727272727%; } .fourelevenths { width: 36.36363636363636%; } .fiveelevenths { width: 45.45454545454545%; } .sixelevenths { width: 54.54545454545454%; } .sevenelevenths { width: 63.63636363636363%; } .eightelevenths { width: 72.72727272727272%; } .nineelevenths { width: 81.81818181818181%; } .tenelevenths { width: 90.9090909090909%; } .onetwelfth { width: 8.33333333333333%; } .twotwelfths { width: 16.66666666666666%; } /*same as .onesixth*/ .threetwelfths { width: 24.99999999999999%; } /*same as .onefourth*/ .fourtwelfths { width: 33.33333333333332%; } /*same as .onethird*/ .fivetwelfths { width: 41.66666666666665%; } .sixtwelfths { width: 49.99999999999998%; } /*same as .onehalf*/ .seventwelfths { width: 58.33333333333331%; } .eighttwelfths { width: 66.66666666666664%; } /*same as .twothirds*/ .ninetwelfths { width: 74.99999999999997%; } .tentwelfths { width: 83.3333333333333%; } /*same as .fivesixths*/ .eleventtwelfths { width: 91.66666666666663%; } .onethirteenth { width: 7.692307692307692%; } .twothirteenths { width: 15.384615384615385%; } .threethirteenths { width: 23.076923076923077%; } .fourthirteenths { width: 30.769230769230769%; } .fivethirteenths { width: 38.461538461538462%; } .sixthirteenths { width: 46.153846153846154%; } .seventhirteenths { width: 53.846153846153846%; } .eightthirteenths { width: 61.538461538461538%; } .ninethirteenths { width: 69.230769230769231%; } .tenthirteenths { width: 76.923076923076923%; } .eleventhirteenths { width: 84.615384615384615%; } .twelvethirteenths { width: 92.307692307692308%; } .thirteenthirteenths { width: 100%; } .onefourteenth { width: 7.142857142857143%; } .twofourteenths { width: 14.285714285714286%; } .threefourteenths { width: 21.428571428571429%; } .fourfourteenths { width: 28.571428571428571%; } .fivefourteenths { width: 35.714285714285714%; } .sixfourteenths { width: 42.857142857142857%; } .sevenfourteenths { width: 50%; } .eightfourteenths { width: 57.142857142857143%; } .ninefourteenths { width: 64.285714285714286%; } .tenfourteenths { width: 71.428571428571429%; } .elevenfourteenths { width: 78.571428571428571%; } .twelvefourteenths { width: 85.714285714285714%; } .thirteenfourteenths { width: 92.857142857142857%; } .fourteenfourteenths { width: 100%; } .onewhole, .onehalf, .onethird, .twothirds, .oneforuth, .twofourths, .threefourths, .onefifth, .twofifths, .threefifths, .fourfifths, .onesixth, .twosixths, .threesixths, .foursixths, .fivesixths, .oneseventh, .twosevenths, .threesevenths, .foursevenths, .fivesevenths, .sixsevenths, .oneeighth, .twoeighths, .threeeighths, .foureighths, .fiveeighths, .sixeighths, .seveneighths, .oneninth, .twoninths, .threeninths, .fourninths, .fiveninths, .sixninths, .sevenninths, .eightninths, .onetenth, .twotenths, .threetenths, .fourtenths, .fivetenths, .sixtenths, .seventenths, .eighttenths, .ninetenths, .oneeleventh, .twoelevenths, .threeelevenths, .fourelevenths, .fiveelevenths, .sixelevenths, .sevenelevenths, .eightelevenths, .nineelevenths, .tenelevenths, .onetwelth, .twotwelths, .threetwelths, .fourtwelths, .fivetwelths, .sixtwelths, .seventwelths, .eighttwelths, .ninetwelths, .tentwelths, .eleventwelths, .onethirteenth, .twothirteenths, .threethirteenths, .fourthirteenths, .fivethirteenths, .sixthirteenths, .seventhirteenths, .eightthirteenths, .ninethirteenths, .tenthirteenths, .eleventhirteenths, .twelvethirteenths, .thirteenthirteenths, .onefourteenth, .twofourteenths, .threefourteenths, .fourfourteenths, .fivefourteenths, .sixfourteenths, .sevenfourteenths, .eightfourteenths, .ninefourteenths, .tenfourteenths, .elevenfourteenths, .twelvefourteenths, .thirteenfourteenths, .fourteenfourteenths { margin: auto; } .inner { padding: 0 20px; } .page-inner { padding: 1% 0; } div.inner:empty { display: none; } /* -------------- =.= Responsive Column Layouts -------------- */ @media screen and (max-width: 767px) { /*make all the columns full width and clear them*/ .onesixth, .oneseventh, .oneeighth, .oneninth, .onetenth, .oneeleventh, .onetwelfth, .twothirds, .threefourths, .fourfourths, .threefifths, .fourfifths, .fivefifths, .foursixths, .fivesixths, .sixsixths, .foursevenths, .fivesevenths, .sixsevenths, .sevensevenths, .fiveeighths, .sixeighths, .seveneighths, .eighteighths, .fiveninths, .sixninths, .sevenninths, .eightninths, .nineninths, .sixtenths, .seventenths, .eighttenths, .ninetenths, .tentenths, .sixelevenths, .sevenelevenths, .eightelevenths, .nineelevenths, .tenelevenths, .elevenelevenths, .seventwelfths, .eighttwelfths, .ninetwelfths, .tentwelfths, .eleventwelfths, .twelvetwelfths, .onehalf, .onethird, .onefourth, .twofourths, .onefifth, .twofifths, .twosixths, .threesixths, .twosevenths, .threesevenths, .twoeighths, .threeeighths, .foureighths, .twoninths, .threeninths, .fourninths, .twotenths, .threetenths, .fourtenths, .fivetenths, .twoelevenths, .threeelevenths, .fourelevenths, .fiveelevenths, .onetwelfth, .twotwelfths, .threetwelfths, .fourtwelfths, .fivetwelfths, .sixtwelfths, .onethirteenth, .twothirteenths, .threethirteenths, .fourthirteenths, .fivethirteenths, .sixthirteenths, .seventhirteenths, .eightthirteenths, .ninethirteenths, .tenthirteenths, .eleventhirteenths, .twelvethirteenths, .thirteenthirteenths, .onefourteenth, .twofourteenths, .threefourteenths, .fourfourteenths, .fivefourteenths, .sixfourteenths, .sevenfourteenths, .eightfourteenths, .ninefourteenths, .tenfourteenths, .elevenfourteenths, .twelvefourteenths, .thirteenfourteenths, .fourteenfourteenths { width: 100%; clear: both; } } /*but don't do it if a column has a class of "colfixed" ...*/ .colfixed { clear: none !important; } .onewhole.colfixed, .twohalves.colfixed, .threethirds.colfixed, .fourfourths.colfixed, .fivefifths.colfixed, .sixsixths.colfixed, .sevensevenths.colfixed, .eighteighths.colfixed, .nineninths.colfixed, .tentenths.colfixed, .elevenelevenths.colfixed, .twelvetwelfths.colfixed { width: 100% !important; } .onehalf.colfixed, .twofourths.colfixed, .threesixths.colfixed, .foureighths.colfixed, .fivetenths.colfixed, .sixtwelfths.colfixed { width: 50% !important; } .onethird.colfixed, .twosixths.colfixed, .threeninths.colfixed, .fourtwelfths.colfixed { width: 33.333333% !important; } .twothirds.colfixed, .foursixths.colfixed, .sixninths.colfixed, .eighttwelfths.colfixed { width: 66.666666% !important; } .onefourth.colfixed, .twoeighths.colfixed, .threetwelfths.colfixed { width: 25% !important; } .threefourths.colfixed, .sixeighths.colfixed { width: 75% !important; } .onefifth.colfixed, .twotenths.colfixed { width: 20% !important; } .twofifths.colfixed, .fourtenths.colfixed { width: 40% !important; } .threefifths.colfixed, .sixtenths.colfixed { width: 60% !important; } .fourfifths.colfixed, .eighttenths.colfixed { width: 80% !important; } .onesixth.colfixed, .twotwelfths.colfixed { width: 16.666666666666667% !important; } .fivesixths.colfixed, .tentwelfths.colfixed { width: 83.33333333333334% !important; } .oneseventh.colfixed { width: 14.28571428571429% !important; } .twosevenths.colfixed { width: 28.57142857142858% !important; } .threesevenths.colfixed { width: 42.85714285714287% !important; } .foursevenths.colfixed { width: 57.14285714285716% !important; } .fivesevenths.colfixed { width: 71.42857142857145% !important; } .sixsevenths.colfixed { width: 85.71428571428574% !important; } .oneeighth.colfixed { width: 12.5% !important; } .threeeighths.colfixed { width: 37.5% !important; } .fiveeighths.colfixed { width: 62.5% !important; } .seveneighths.colfixed { width: 87.5% !important; } .oneninth.colfixed { width: 11.11111111111111% !important; } .twoninths.colfixed { width: 22.22222222222222% !important; } .fourninths.colfixed { width: 44.44444444444444% !important; } .fiveninths.colfixed { width: 55.55555555555555% !important; } .sevenninths.colfixed { width: 77.77777777777777% !important; } .eightninths.colfixed { width: 88.88888888888888% !important; } .onetenth.colfixed { width: 10% !important; } .threetenths.colfixed { width: 30% !important; } .seventenths.colfixed { width: 70% !important; } .ninetenths.colfixed { width: 90% !important; } .oneeleventh.colfixed { width: 9.09090909090909% !important; } .twoelevenths.colfixed { width: 18.18181818181818% !important; } .threeelevenths.colfixed { width: 27.27272727272727% !important; } .fourelevenths.colfixed { width: 36.36363636363636% !important; } .fiveelevenths.colfixed { width: 45.45454545454545% !important; } .sixelevenths.colfixed { width: 54.54545454545454% !important; } .sevenelevenths.colfixed { width: 63.63636363636363% !important; } .eightelevenths.colfixed { width: 72.72727272727272% !important; } .nineelevenths.colfixed { width: 81.81818181818181% !important; } .tenelevenths.colfixed { width: 90.9090909090909% !important; } .onetwelfth.colfixed { width: 8.33333333333333% !important; } .fivetwelfths.colfixed { width: 41.66666666666665% !important; } .seventwelfths.colfixed { width: 58.33333333333331% !important; } .ninetwelfths.colfixed { width: 74.99999999999997% !important; } .eleventwelfths.colfixed { width: 91.66666666666663% !important; } /* -------------- =.= Clearfix and Clearing -------------- */ .clearfix:before, .clearfix:after, .fix:before, .fix:after { font-family: 'Font Awesome 7 Pro'; font-weight: 900; content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after, .fix:after, .clear { clear: both; } .clearfix, .fix { zoom: 1; } .clearleft { clear: left; } .clearright { clear: right; } /* -------------- =.= Floating -------------- */ .left, .colleft { float: left; } .right, .colright { float: right; } /* -------------- =.= Form Framework -------------- */ /* fix for IE and Edge where LEGEND elements overlaps INPUTs */ div.form-field div.label legend { display: inline-block; margin-right: 10px; } /* -------------- =.= Form Elements -------------- */ fieldset { border: none; } div.form-field { width: 100%; margin: 10px 0; float: left; display: flex; /* MLJ 2021 */ align-items: center; flex-wrap: wrap; } div.form-field .label { float: left; min-width: 40%; max-width: 99%; font-weight: 600; color: #244B5A; } div.input { width: 98%; margin-right: 2%; margin-left: 0; } .form-group { margin: 10px 0; } .form-group.onewhole div.input { width: 100%; } .form-group:last-child .input { width: 100%; margin-right: 0; } div.form-field div.input.submit { border-top: solid 1px #ddd; padding: 0.7em 0; margin: 1em 0 0 0; float: right; /* width: 60%; cuts off contact submit button at mobile size */ width: 100%; } div.form-field .button.submit { width: auto; } div.form-field.rule { /*login form div.form-field exception for horizontal line*/ border-bottom: solid 1px #BAC7C6 !important; padding: 0; margin: 0 0 4px 0; } input[type=text], input[type=tel], input[type=password], input[type=email], textarea { width: 100%; } @media screen and (max-width:767px) { form { margin: auto; } div.form-field { width: 96%; border: none; display: block; } div.form-field .label, div.form-field .input { float: none; width: 100%; clear: both; margin: 0; } } form { margin: 0; padding: 0; } label { display: block; } /*labels within radio or checkbox groups*/ div.input label { display: inline-block; margin: 0 10px; } input { font-weight: normal; padding: 3px; margin: 0; } textarea { height: 120px; width: 100%; } input[type=text], input[type=tel], input[type=password], input[type=email], textarea, select { padding: 0.75rem; box-sizing: border-box; border: solid 2px #D0D3D4; font-family: inherit; font-size: 1.25rem; color: #011020; border-radius: 6px; } input[type=button] { float: right; margin: 10px; } input[type=text]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus, select:focus { box-shadow: inset 1px 1px 5px #ccc; } select { display: block; font-size: 1rem; font-family: inherit; font-weight: inherit; color: inherit; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 2px solid #c1c4c8; box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04); border-radius: 3px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url(""), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } select::-ms-expand { display: none; } select:hover { border-color: #888; } select:focus { border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } select option { font-weight: normal; } /* Disabled styles */ select:disabled, select[aria-disabled=true] { color: graytext; background-image: url(""), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); } select:disabled:hover, select[aria-disabled=true] { border-color: #aaa; } input.formkey { width: inherit; } input.error, textarea.error, select.error, input.errormsg, textarea.errormsg, select.errormsg { border-color: #d13836 !important; } .errormsg { color: #d13836; padding: 1px 0 10px 0; font-size: 0.8rem; text-align: left; } .form_label_req { color: #006990; font-weight: bold; } input.field, textarea { font-size: 1.25rem; } input.upload { font-size: 11px; font-size: 0.6875rem; width: 99%; } input.short, textarea.short { width: 33%; } input.wide, textarea.wide { width: 100%; } input.small, textarea.small { font-size: .9rem; } input.large, textarea.large { font-size: 1rem; } input.tiny { height: 12px; font-size: .8rem; font-weight: bold; } select.select {} select.wide { width: 99%; } select.short { width: 33%; } select.small { font-size: .9rem; } select.large { font-size: 1.3rem; } select.multiple { width: 96.5%; /* height: 130px; */ overflow: auto; font-size: 1rem; } select.multiple_wide { width: 99%; height: 100px; overflow: auto; } .aid { color: #333; font-size: .75rem !important; line-height: 1; display: inline-block; padding: 2px 0 3px 0; font-weight: normal; } @media screen and (max-width: 767px) { div#L9Form_div div.form-field .aid { display: block; } /* fixing large gap at mobile size */ } .aid ul { margin: 0 0 0 20px; padding: 0px; } div.form-field .label label { font-size: 1.25rem; display: inline-block; line-height: 1.2; margin: 5px 0; } .confirm { padding: .5em 3%; font-size: 1.25rem; color: #2ecc40 } label.agree { font-size: 11px; font-size: 0.6875rem; } div.fields ul { list-style: none; margin: 0; padding: 0; } div.fields ul li { height: 80px; } div.form-field div.error_message, div.error { color: #e80000 !important; font-size: 1rem; margin: 0 0 3px 0; clear: both; } .status label { font-weight: normal; text-transform: none; color: #3a3a3a; display: inline; font-size: 14px; font-size: 0.875rem; } /* -------------- =.= FORMS TOOL OUTPUT -------------- */ .formerrors { color: #B22222; padding: 0px 0px 0px 10px; text-align: left; } .form_err_msg_area { color: #B22222; padding: 0.5em 0; font-size: 1rem; } /* Generated Form styles */ ul#form_elements, ul#form_elements li { list-style: none; margin: 0 !important; padding: 0 !important; /* override drag and drop positioning from form workboard...*/ position: inherit !important; width: inherit !important; top: inherit !important; left: inherit !important; } div.section_title { font-size: 1.5rem; font-weight: bold; color: #005A6F; } input[type=radio], input[type=checkbox] { display: inline-block; vertical-align: middle; margin-right: 10px; } select { min-width: 50%; max-width: 100%; } div.form-field.consent {display: flex; box-sizing: border-box; flex-wrap: nowrap; align-items: flex-start;} div.form-field.consent div.label {float: none; width: 17px; min-width: 17px;} div.form-field.consent div.input {width: calc(100% - 20px);} .ui-sortable-placeholder { display: none !important; } div.form-field div.label label { word-wrap: break-word; width: auto; } #form_div { width: 100%; } #form_div h2, wrapper-survey h2 { border-bottom: solid 1px #DDDFE0; } ul.radio-list, ul.check-list { margin: 0; padding: 4px 0; list-style: none; } ul.radio-list li, ul.check-list li { display: block; float: left; padding: 2px 8px; } input.med { width: 60%; } /*disabled poll button*/ input[disabled="disabled"] { background-color: #DDDFE0 !important; background-image: none !important; border: none !important; box-shadow: none !important; } input[disabled="disabled"]:hover { color: #fff; background-color: #4E5157 !important; background-image: none !important; border: none !important; box-shadow: none !important; cursor: default; } #form_elements_panel #form_elements, .form-panel .div.form-fields {} #form_elements_panel ul#form_elements, #form_elements_panel ul#form_elements li { list-style: none; margin: 0; padding: 0; } /* fix for IE and Edge where LEGEND elements overlaps INPUTs */ div.form-field div.label legend { display: inline-block; margin-right: 10px; line-height: 1.2; margin-bottom: 15px; } .JQcaptcha { width: 30% !important; margin: 0 1em 0 0; float: left; } ul.l9-list-style-none { margin: 0; padding: 0; } ul.l9-list-style-none li div.input ol, ul.l9-list-style-none li div.input ul { margin: 0; padding: 0; } ul.l9-list-style-none li, ul.l9-list-style-none li div.input ol li, ul.l9-list-style-none li div.input ul li { list-style-type: none; } ul.l9-list-style-none li ol li, ul.l9-list-style-none li ul li { list-style-type: inherit; } #L9Form_message_area { padding: 20px; margin: 20px; border: solid 1px #d9d9d9; color: #333; background-color: #f7f7f8; /* light grey */ text-align: center; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); } span.JQradioClick { margin-right: 15px; } /* removing extra space caused by break tags */ div.form-field .label br { display: none; } span.aid, div.form-field .label label.aid { clear: both; display: block; color: #63666A; margin-right: 10px; } form#ReferralForm {margin-top: 44px;} /* -------------- =.= Conventional Content Decks -------------- */ div.decks.fix { overflow: hidden; } /*multi column support*/ .contentdeck.onewhole, .contentdeck.onehalf, .contentdeck.onethird, .contentdeck.onefourth, .contentdeck.onefifth { width: 100% !important; } .contentdeck.onehalf .inner, .contentdeck.onethird .inner, .contentdeck.onefourth .inner, .contentdeck.onefifth .inner, .contentdeck.icon-grid .inner { max-width: 1440px !important; } .contentdeck.onehalf .multicol-inner, .contentdeck.onethird .multicol-inner, .contentdeck.onefourth .multicol-inner, .contentdeck.onefifth .multicol-inner { padding: 20px !important; } /*if one column layout is selected, don't display columns 2, 3, 4 or 5*/ div.contentdeck.onewhole div.deckinner>div.multicol2, div.contentdeck.onewhole div.deckinner>div.multicol3, div.contentdeck.onewhole div.deckinne>div.multicol4, div.contentdeck.onewhole div.deckinner>div.multicol5 { display: none; } /*if two column layout is selected, don't display columns 3, 4 or 5*/ div.contentdeck.onehalf div.deckinner div.multicol3, div.contentdeck.onehalf div.deckinner div.multicol4, div.contentdeck.onehalf div.deckinner div.multicol5 { display: none; } /*if three column layout is selected, don't display columns 4 or 5*/ div.contentdeck.onethird div.deckinner div.multicol4, div.contentdeck.onethird div.deckinner div.multicol5 { display: none; } /*if four column layout is selected, don't display column 5*/ div.contentdeck.onefourth div.deckinner div.multicol5 { display: none; } /*apply offset column widths*/ .contentdeck.onethird-twothirds .multicol1 { width: 33%; } .contentdeck.onethird-twothirds .multicol2 { width: 66%; } .contentdeck.twothirds-onethird .multicol1 { width: 66%; } .contentdeck.twothirds-onethird .multicol2 { width: 33%; } .contentdeck.onefourth-threefourths .multicol1 { width: 25%; } .contentdeck.onefourth-threefourths .multicol2 { width: 75%; } .contentdeck.threefourths-onefourth .multicol1 { width: 75%; } .contentdeck.threefourths-onefourth .multicol2 { width: 25%; } .contentdeck.onethird-twothirds .multicol3, .contentdeck.onethird-twothirds .multicol4, .contentdeck.onethird-twothirds .multicol5 { display: none; } .contentdeck.twothirds-onethird .multicol3, .contentdeck.twothirds-onethird .multicol4, .contentdeck.twothirds-onethird .multicol5 { display: none; } .contentdeck.onefourth-threefourths .multicol3, .contentdeck.onefourth-threefourths .multicol4, .contentdeck.onefourth-threefourths .multicol5 { display: none; } .contentdeck.threefourths-onefourth .multicol3, .contentdeck.threefourths-onefourth .multicol4, .contentdeck.threefourths-onefourth .multicol5 { display: none; } .contentdeck.onethird-twothirds .multicol1.onewhole { width: 100%; } .contentdeck.onefourth-threefourths .multicol1.onewhole { width: 100%; } @media screen and (max-width:767px) { .contentdeck.onethird-twothirds .multicol1, .contentdeck.twothirds-onethird .multicol1 { width: 100% !important; display: block; float: none; } .contentdeck.onethird-twothirds .multicol2, .contentdeck.twothirds-onethird .multicol2 { width: 100% !important; display: block; float: none; } .contentdeck.onefourth-threefourths .multicol1, .contentdeck.threefourths-onefourth .multicol1 { width: 100% !important; display: block; float: none; } .contentdeck.onefourth-threefourths .multicol2, .contentdeck.threefourths-onefourth .multicol2 { width: 100% !important; display: block; float: none; } .contentdeck .inner { padding: 0; } /* removing extra padding at mobile size */ } .multicol-inner { padding: 40px 20px !important; } .contentdeck .multicol-outro { padding: 0 !important; clear: both; display: block; } .multicol-outro.no-padding, .multicol-outro.no-padding p { padding: 0 !important; margin: 0; line-height: 1; } div.contentdeck { padding: 0; } /*.contentdeck.hasmenuitem { padding-top: 77px; }*/ @media screen and (max-width: 767px) { /*.contentdeck.hasmenuitem { padding-top: 50px; }*/ div.contentdeck h3 { font-size: 32px; font-size: 2rem; } } div.contentdeck div.deckinner /*other deck inner styling in section 10.0*/ { padding-top: 32px; padding-bottom: 32px; } /*there are multiple bit types that support "distinct" content deck purposes*/ div.contentdeck .deckinner.deck-distinct { padding: 50px 0; display: flex; justify-content: center; align-items: center; } .deck-distinct .multicol-inner { padding: 50px 20px !important; } div.contentdeck .deck-distinct h2.deck-title, div.contentdeck .deck-distinct h3.deck-title { text-align: left; width: 100%; } /*content deck background colors and changing content elements to white based on background*/ div.contentdeck.white { background-color: #fff; } div.contentdeck.white.border:before, div.contentdeck.white.border:after { /*put a border at the top and bottom of white decks*/ display: block; background: #8C9495; height: 2px; margin: 10px 2%; width: 96%; position: relative; visibility: visible; } div.contentdeck.white {background-color: #fff;} div.contentdeck.geyser { background-color: #DCE4E2; } div.contentdeck.firefly { background-color: #000000; } div.contentdeck.blue-dianne { background-color: #244B5A; } div.contentdeck.eminence { background-color: #EF4636; } div.contentdeck.saffron { background-color: #FEBE2C; } div.contentdeck.st-tropaz { background-color: #007D80; } div.contentdeck.monarch { background-color: #A12D4D; } div.contentdeck.pelorous { background-color: #00A9BC; } div.contentdeck.azure-geyser { background-color: #B2BEDC; } /* offset diagonal - image and text diagonal to each other, with background on text area only */ div.contentdeck.offset-diagonal {background: white;} div.contentdeck.offset-diagonal .deckinner { padding-top: 200px; /* negative margin plus deck padding */} div.contentdeck.offset-diagonal .multicol1 {border-radius: 20px; width: 45%; z-index:2; align-self: flex-end; padding: 0 20px;} /* text */ div.contentdeck.offset-diagonal .multicol2 {border-radius: 20px; width: 55%; z-index: 1; margin-top: -150px; align-self: flex-start;} /* image */ div.contentdeck.offset-diagonal .deck-distinct .multicol1 .multicol-inner {padding: 50px 20px 20px 20px !important;} div.contentdeck.offset-diagonal.photo-align-right .multicol1 {margin-right:-10%;} /* text */ div.contentdeck.offset-diagonal.photo-align-left .multicol1 {margin-left:-10%;} /* text */ /* with round images */ div.contentdeck.offset-diagonal.deck-image-round.photo-align-right .multicol1 {width: 60%; margin-right:-15%;} /* text */ div.contentdeck.offset-diagonal.deck-image-round.photo-align-right .multicol2 {width: 40%; margin-top: -150px;} /* image */ div.contentdeck.offset-diagonal.deck-image-round.photo-align-left .multicol1 {width: 60%; margin-left:-15%;} /* text */ div.contentdeck.offset-diagonal.deck-image-round.photo-align-left .multicol2 {width: 40%; margin-top: -150px;} /* image */ @media screen and (max-width: 767px) { div.contentdeck.offset-diagonal {flex-direction: column !important;} div.contentdeck.offset-diagonal .deckinner {padding: 0 0 50px 0;} div.contentdeck.offset-diagonal .multicol2 { margin: 0 auto !important; z-index: 2;} div.contentdeck.offset-diagonal .multicol1 {margin: -130px auto 0 auto !important; padding-top: 100px; border-radius: 0 !important; z-index: 1;} } /* offset-diagonal background colors */ div.contentdeck.offset-diagonal.white .multicol1 {background-color: #fff; border: 1px solid #ededed; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;} div.contentdeck.offset-diagonal.geyser .multicol1 { background-color: #DCE4E2; } div.contentdeck.offset-diagonal.firefly .multicol1 { background-color: #000000; } div.contentdeck.offset-diagonal.blue-dianne .multicol1 { background-color: #244B5A; } div.contentdeck.offset-diagonal.eminence .multicol1 { background-color: #EF4636; } div.contentdeck.offset-diagonal.saffron .multicol1 { background-color: #FEBE2C; } div.contentdeck.offset-diagonal.st-tropaz .multicol1 { background-color: #007D80; } div.contentdeck.offset-diagonal.monarch .multicol1 { background-color: #A12D4D; } div.contentdeck.offset-diagonal.pelorous .multicol1 { background-color: #00A9BC; } div.contentdeck.offset-diagonal.azure-geyser .multicol1 { background-color: #B2BEDC; } /* offset diagonal - with patterns - NOW CHEVRONS */ div.contentdeck.offset-diagonal.dot-pattern.white {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.white .multicol1 {background: #fff url("") repeat center top;} /* 20 percent before */ div.contentdeck.offset-diagonal.dot-pattern.geyser {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.geyser .multicol1 { background: #DCE4E2 url("") repeat center top; } /* white pattern before */ div.contentdeck.offset-diagonal.dot-pattern.firefly {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.firefly .multicol1 { background: #000000 url("") repeat center top; } div.contentdeck.offset-diagonal.dot-pattern.blue-dianne {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.blue-dianne .multicol1 { background: #244B5A url("") repeat center top; } div.contentdeck.offset-diagonal.dot-pattern.eminence {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.eminence .multicol1 { background: #EF4636 url("") repeat center top; } div.contentdeck.offset-diagonal.dot-pattern.saffron {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.saffron .multicol1 { background: #FEBE2C url("") repeat center top; } /* white pattern before */ div.contentdeck.offset-diagonal.dot-pattern.st-tropaz {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.st-tropaz .multicol1 { background: #007D80 url("") repeat center top; } div.contentdeck.offset-diagonal.dot-pattern.monarch {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.monarch .multicol1 { background: #A12D4D url("") repeat center top; } div.contentdeck.offset-diagonal.dot-pattern.pelorous {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.pelorous .multicol1 { background: #00A9BC url("") repeat center top; } div.contentdeck.offset-diagonal.dot-pattern.azure-geyser {background: #fff;} div.contentdeck.offset-diagonal.dot-pattern.azure-geyser .multicol1 { background: #B2BEDC url("") repeat center top;} /* 20 percent before */ /* offset horizontal - 3/4 offset rounded corner box layout */ div.contentdeck.offset-horizontal {margin: 50px 0;} div.contentdeck.offset-horizontal .deckinner.deck-distinct {padding: 0; position: relative;} div.contentdeck.offset-horizontal .deckinner.deck-distinct .multicol1 {padding: 20px 0; z-index: 1; min-height: 400px; display: flex; align-items: center;} /* text */ div.contentdeck.offset-horizontal .deckinner.deck-distinct .multicol2 {padding: 20px 0; z-index: 2;} /* image */ div.contentdeck.offset-horizontal.geyser.photo-align-left { background: linear-gradient(90deg, transparent 50%, #DCE4E2 0%); } div.contentdeck.offset-horizontal.geyser.photo-align-right { background: linear-gradient(90deg, #DCE4E2 50%, transparent 0%); } div.contentdeck.offset-horizontal.geyser.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #DCE4E2; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.geyser.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #DCE4E2; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.firefly.photo-align-left { background: linear-gradient(90deg, transparent 50%, #000000 0%); } div.contentdeck.offset-horizontal.firefly.photo-align-right { background: linear-gradient(90deg, #000000 50%, transparent 0%); } div.contentdeck.offset-horizontal.firefly.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #000000; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.firefly.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #000000; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.blue-dianne.photo-align-left { background: linear-gradient(90deg, transparent 50%, #244B5A 0%); } div.contentdeck.offset-horizontal.blue-dianne.photo-align-right { background: linear-gradient(90deg, #244B5A 50%, transparent 0%); } div.contentdeck.offset-horizontal.blue-dianne.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #244B5A; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.blue-dianne.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #244B5A; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.eminence.photo-align-left { background: linear-gradient(90deg, transparent 50%, #EF4636 0%); } div.contentdeck.offset-horizontal.eminence.photo-align-right { background: linear-gradient(90deg, #EF4636 50%, transparent 0%); } div.contentdeck.offset-horizontal.eminence.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #EF4636; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.eminence.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #EF4636; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.saffron.photo-align-left { background: linear-gradient(90deg, transparent 50%, #FEBE2C 50%); } div.contentdeck.offset-horizontal.saffron.photo-align-right { background: linear-gradient(90deg, #FEBE2C 50%, transparent 50%); } div.contentdeck.offset-horizontal.saffron.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #FEBE2C; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.saffron.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #FEBE2C; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.st-tropaz.photo-align-left { background: linear-gradient(90deg, transparent 50%, #007D80 0%); } div.contentdeck.offset-horizontal.st-tropaz.photo-align-right { background: linear-gradient(90deg, #007D80 50%, transparent 0%); } div.contentdeck.offset-horizontal.st-tropaz.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #007D80; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.st-tropaz.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #007D80; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.monarch.photo-align-left { background: linear-gradient(90deg, transparent 50%, #A12D4D 0%); } div.contentdeck.offset-horizontal.monarch.photo-align-right { background: linear-gradient(90deg, #A12D4D 50%, transparent 0%); } div.contentdeck.offset-horizontal.monarch.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #A12D4D; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.monarch.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #A12D4D; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.pelorous.photo-align-left { background: linear-gradient(90deg, transparent 50%, #00A9BC 50%); } div.contentdeck.offset-horizontal.pelorous.photo-align-right { background: linear-gradient(90deg, #00A9BC 50%, transparent 50%); } div.contentdeck.offset-horizontal.pelorous.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #00A9BC; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.pelorous.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #00A9BC; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal.azure-geyser.photo-align-left { background: linear-gradient(90deg, transparent 50%, #B2BEDC 0%); } div.contentdeck.offset-horizontal.azure-geyser.photo-align-right { background: linear-gradient(90deg, #B2BEDC 50%, transparent 0%); } div.contentdeck.offset-horizontal.azure-geyser.photo-align-left .multicol1 {margin-left: -30%; padding-left: 30%; background: #B2BEDC; border-radius: 20px 0 0 20px ;} div.contentdeck.offset-horizontal.azure-geyser.photo-align-right .multicol1 { margin-right: -30%; padding-right: 30%; background: #B2BEDC; border-radius: 0 20px 20px 0 ; } div.contentdeck.offset-horizontal .feature-img img {max-height: 400px;} @media screen and (max-width: 767px) { div.contentdeck.offset-horizontal .deckinner.deck-distinct .multicol1 {min-height: 100px;} /* text */ div.contentdeck.offset-horizontal.geyser { background: linear-gradient(to bottom, transparent 30%, #DCE4E2 0%) !important; } div.contentdeck.offset-horizontal.firefly { background: linear-gradient(to bottom, transparent 30%, #000000 0%) !important; } div.contentdeck.offset-horizontal.blue-dianne { background: linear-gradient(to bottom, transparent 30%, #244B5A 0%) !important; } div.contentdeck.offset-horizontal.eminence { background: linear-gradient(to bottom, transparent 30%, #EF4636 0%) !important; } div.contentdeck.offset-horizontal.saffron { background: linear-gradient(to bottom, transparent 30%, #FEBE2C 0%) !important; } div.contentdeck.offset-horizontal.st-tropaz { background: linear-gradient(to bottom, transparent 30%, #007D80 0%) !important; } div.contentdeck.offset-horizontal.monarch { background: linear-gradient(to bottom, transparent 30%, #A12D4D 0%) !important; } div.contentdeck.offset-horizontal.pelorous { background: linear-gradient(to bottom, transparent 30%, #00A9BC 0%) !important; } div.contentdeck.offset-horizontal.azure-geyser { background: linear-gradient(to bottom, transparent 30%, #B2BEDC 0%) !important; } } /* pattern and colors - NOW CHEVRONS */ div.contentdeck.dot-pattern.white {background: #fff url("") repeat center top;} /* 20 percent before */ div.contentdeck.dot-pattern.geyser { background: #DCE4E2 url("") repeat center top; } /* white pattern before */ div.contentdeck.dot-pattern.firefly { background: #000000 url("") repeat center top; } div.contentdeck.dot-pattern.blue-dianne { background: #244B5A url("") repeat center top; } div.contentdeck.dot-pattern.eminence { background: #EF4636 url("") repeat center top; } div.contentdeck.dot-pattern.saffron { background: #FEBE2C url("") repeat center top; } /* white pattern before */ div.contentdeck.dot-pattern.st-tropaz { background: #007D80 url("") repeat center top; } div.contentdeck.dot-pattern.monarch { background: #A12D4D url("") repeat center top; } div.contentdeck.dot-pattern.pelorous { background: #00A9BC url("") repeat center top; } div.contentdeck.dot-pattern.azure-geyser { background: #B2BEDC url("") repeat center top;} /* 20 percent before */ /* half pattern */ div.contentdeck.half-pattern.geyser {background: linear-gradient(to bottom, #DCE4E2 60%, white 0%); } div.contentdeck.half-pattern.firefly { background: linear-gradient(to bottom, #000000 60%, white 0%); } div.contentdeck.half-pattern.blue-dianne { background: linear-gradient(to bottom, #244B5A 60%, white 0%); } div.contentdeck.half-pattern.eminence { background: linear-gradient(to bottom, #EF4636 60%, white 0%); } div.contentdeck.half-pattern.saffron { background: linear-gradient(to bottom, #FEBE2C 60%, white 0%); } div.contentdeck.half-pattern.st-tropaz { background: linear-gradient(to bottom, #007D80 60%, white 0%); } div.contentdeck.half-pattern.monarch { background: linear-gradient(to bottom, #A12D4D 60%, white 0%); } div.contentdeck.half-pattern.pelorous { background: linear-gradient(to bottom, #00A9BC 60%, white 0%); } div.contentdeck.half-pattern.azure-geyser { background: linear-gradient(to bottom, #B2BEDC 60%, white 0%); } /* half pattern with dots - NOW CHEVRONS */ div.contentdeck.dot-pattern.half-pattern.geyser {background: url("") repeat center top, linear-gradient(to bottom, #DCE4E2 60%, white 0%); } /* white pattern before */ div.contentdeck.dot-pattern.half-pattern.firefly { background: url("") repeat center top, linear-gradient(to bottom, #000000 60%, white 0%); } div.contentdeck.dot-pattern.half-pattern.blue-dianne { background: url("") repeat center top, linear-gradient(to bottom, #244B5A 60%, white 0%); } div.contentdeck.dot-pattern.half-pattern.eminence { background: url("") repeat center top, linear-gradient(to bottom, #EF4636 60%, white 0%); } div.contentdeck.dot-pattern.half-pattern.saffron { background: url("") repeat center top, linear-gradient(to bottom, #FEBE2C 60%, white 0%); } /* white pattern before */ div.contentdeck.dot-pattern.half-pattern.st-tropaz { background: url("") repeat center top, linear-gradient(to bottom, #007D80 60%, white 0%); } div.contentdeck.dot-pattern.half-pattern.monarch { background: url("") repeat center top, linear-gradient(to bottom, #A12D4D 60%, white 0%) ; } div.contentdeck.dot-pattern.half-pattern.pelorous { background: url("") repeat center top, linear-gradient(to bottom, #00A9BC 60%, white 0%); } div.contentdeck.dot-pattern.half-pattern.azure-geyser { background: url("") repeat center top, linear-gradient(to bottom, #B2BEDC 60%, white 0%); } /* 20 percent before */ /* image as background with overlay in two-column image/text decks */ /* rounded background image split deck */ div.contentdeck.deck-rounded-bgimg {max-width: 1340px; margin: 20px auto; border-radius: 25px; overflow: hidden;} div.contentdeck.deck-rounded-bgimg .deckinner{ border-radius: 25px; margin: 0; padding: 0; background-size: contain; background-repeat: no-repeat;} div.contentdeck.deck-rounded-bgimg.photo-align-right .deckinner{background-position: center right;} div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol2 {width: 20%;} div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol1 {width: 80%;} div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol-inner {padding: 80px 50px !important; max-width: 50%;} div.contentdeck.deck-rounded-bgimg.narrow-deck {max-width: 1000px;} div.contentdeck.deck-rounded-bgimg.narrow-deck .deck-distinct .multicol2 {width: 30%;} div.contentdeck.deck-rounded-bgimg.narrow-deck .deck-distinct .multicol1 {width: 70%;} div.contentdeck.deck-rounded-bgimg.white .multicol1 {background: linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,225,0.5) 80%, rgba(255,255,255,0) 100%); } div.contentdeck.deck-rounded-bgimg.geyser .multicol1 {background: linear-gradient(to right, rgba(216,223,225,1) 60%, rgba(216,223,225,0.5) 80%, rgba(216,223,225,0) 100%); } div.contentdeck.deck-rounded-bgimg.firefly .multicol1 {background: linear-gradient(to right, rgba(12,31,44,1) 60%, rgba(12,31,44,0.5) 80%, rgba(12,31,44,0) 100%); } div.contentdeck.deck-rounded-bgimg.blue-dianne .multicol1 {background: linear-gradient(to right, rgba(36,75,90,1) 60%, rgba(36,75,90,0.5) 80%, rgba(36,75,90,0) 100%); } div.contentdeck.deck-rounded-bgimg.eminence .multicol1 {background: linear-gradient(to right, rgba(103,50,119,1) 60%, rgba(103,50,119,0.5) 80%, rgba(103,50,119,0) 100%); } div.contentdeck.deck-rounded-bgimg.saffron .multicol1 {background: linear-gradient(to right, rgba(245,206,62,1) 60%, rgba(245,206,62,0.5) 80%, rgba(245,206,62,0) 100%); } div.contentdeck.deck-rounded-bgimg.st-tropaz .multicol1 {background: linear-gradient(to right, rgba(35,96,146,1) 60%, rgba(35,96,146,0.5) 80%, rgba(35,96,146,0) 100%); } div.contentdeck.deck-rounded-bgimg.monarch .multicol1 {background: linear-gradient(to right, rgba(163,33,53,1) 60%, rgba(163,33,53,0.5) 80%, rgba(163,33,53,0) 100%); } div.contentdeck.deck-rounded-bgimg.pelorous .multicol1 {background: linear-gradient(to right, rgba(66,167,198,1) 60%, rgba(66,167,198,0.5) 80%, rgba(66,167,198,0) 100%); } div.contentdeck.deck-rounded-bgimg.azure-geyser .multicol1 {background: linear-gradient(to right, rgba(237,247,250,1) 60%, rgba(237,247,250,0.5) 80%, rgba(237,247,250,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.white .multicol1 {background: linear-gradient(to left, rgba(255,255,255,1) 60%, rgba(255,255,225,0.5) 80%, rgba(255,255,255,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.geyser .multicol1 {background: linear-gradient(to left, rgba(216,223,225,1) 60%, rgba(216,223,225,0.5) 80%, rgba(216,223,225,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.firefly .multicol1 {background: linear-gradient(to left, rgba(12,31,44,1) 60%, rgba(12,31,44,0.5) 80%, rgba(12,31,44,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.blue-dianne .multicol1 {background: linear-gradient(to left, rgba(36,75,90,1) 60%, rgba(36,75,90,0.5) 80%, rgba(36,75,90,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.eminence .multicol1 {background: linear-gradient(to left, rgba(103,50,119,1) 60%, rgba(103,50,119,0.5) 80%, rgba(103,50,119,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.saffron .multicol1 {background: linear-gradient(to left, rgba(245,206,62,1) 60%, rgba(245,206,62,0.5) 80%, rgba(245,206,62,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.st-tropaz .multicol1 {background: linear-gradient(to left, rgba(35,96,146,1) 60%, rgba(35,96,146,0.5) 80%, rgba(35,96,146,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.monarch .multicol1 {background: #DCE4E2; } div.contentdeck.deck-rounded-bgimg.photo-align-left.pelorous .multicol1 {background: linear-gradient(to left, rgba(66,167,198,1) 60%, rgba(66,167,198,0.5) 80%, rgba(66,167,198,0) 100%); } div.contentdeck.deck-rounded-bgimg.photo-align-left.azure-geyser .multicol1 {background: linear-gradient(to left, rgba(237,247,250,1) 60%, rgba(237,247,250,0.5) 80%, rgba(237,247,250,0) 100%); } @media screen and (max-width: 767px) { div.contentdeck.deck-rounded-bgimg, div.contentdeck.deck-rounded-bgimg.narrow-deck {max-width: 92%;} div.contentdeck.deck-rounded-bgimg .deckinner { background-position: center top !important;} div.contentdeck.deck-rounded-bgimg .multicol2 {min-height: 300px; } div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol-inner { max-width: 90%; padding: 30px 20px !important; } div.contentdeck.deck-rounded-bgimg.white .multicol1 {background: linear-gradient(to top, rgba(255,255,255,1) 60%, rgba(255,255,225,0.5) 80%, rgba(255,255,255,0) 100%); } div.contentdeck.deck-rounded-bgimg.geyser .multicol1 { background-color: #DCE4E2; } div.contentdeck.deck-rounded-bgimg.firefly .multicol1 { background-color: #000000; } div.contentdeck.deck-rounded-bgimg.blue-dianne .multicol1 { background-color: #244B5A; } div.contentdeck.deck-rounded-bgimg.eminence .multicol1 { background-color: #EF4636; } div.contentdeck.deck-rounded-bgimg.saffron .multicol1 { background-color: #FEBE2C; } div.contentdeck.deck-rounded-bgimg.st-tropaz .multicol1 { background-color: #007D80; } div.contentdeck.deck-rounded-bgimg.monarch .multicol1 { background-color: #A12D4D; } div.contentdeck.deck-rounded-bgimg.pelorous .multicol1 { background-color: #00A9BC; } div.contentdeck.deck-rounded-bgimg.azure-geyser .multicol1 { background-color: #B2BEDC; } div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol1 {width: 100% !important;} } @media screen and (max-width: 500px) { div.contentdeck.deck-rounded-bgimg .deckinner {background-position: center top !important;} div.contentdeck.deck-rounded-bgimg .multicol2 {min-height: 100px; } } /* hide and show block image for mobile size to combat background-size problems */ div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol2 .feature-img img {display: none;} @media screen and (max-width: 767px) { div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol2 .feature-img {max-width: 100%; width: 100%;} div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol2 .feature-img img {display: block; width: 100%; border-radius: 0;} div.contentdeck.deck-rounded-bgimg .deck-distinct .multicol2 .multicol-inner {padding: 0 !important; max-width: 100%;} div.contentdeck.deck-rounded-bgimg .deckinner {background-image: none !important;} } /*the following makes most content elements white within the brandcolor content decks*/ div.contentdeck.brandcolor, div.contentdeck.brandcolor h2, div.contentdeck.brandcolor h3, div.contentdeck.brandcolor h4, div.contentdeck.brandcolor h5, div.contentdeck.brandcolor h6, div.contentdeck.brandcolor p, div.contentdeck.brandcolor a, div.contentdeck.brandcolor .intro { color: #fff; } /*not sure if we still need this...*/ div.contentdeck div.page_body { padding: 0 !important; } div.contentdeck div.contentdeck, div.contentdeck .contentdeck.onehalf .multicol-inner { padding: 5px 5px 5px 0 !important; } /*content decks with background images*/ .contentdeck.has-bgimg { background-size: cover !important; background-repeat: no-repeat!important; } /*content decks - background image overlay opacity*/ /*if the deck HAS a background image, shade the overlay as selected*/ /* default in case no opacity is chosen */ .contentdeck.has-bgimg .deck-overlay.darken { background-color: rgba(8, 29, 38, 0.9); } .contentdeck.has-bgimg .deck-overlay.darken1 { background-color: rgba(8, 29, 38, 0.1); } .contentdeck.has-bgimg .deck-overlay.darken2 { background-color: rgba(8, 29, 38, 0.3); } .contentdeck.has-bgimg .deck-overlay.darken3 { background-color: rgba(8, 29, 38, 0.5); } .contentdeck.has-bgimg .deck-overlay.darken4 { background-color: rgba(8, 29, 38, 0.7); } .contentdeck.has-bgimg .deck-overlay.darken5 { background-color: rgba(8, 29, 38, 0.9); } /* default in case no opacity is chosen */ .contentdeck.has-bgimg .deck-overlay.lighten { background-color: rgba(255, 255, 255, 0.9); } .contentdeck.has-bgimg .deck-overlay.lighten1 { background-color: rgba(255, 255, 255, 0.1); } .contentdeck.has-bgimg .deck-overlay.lighten2 { background-color: rgba(255, 255, 255, 0.3); } .contentdeck.has-bgimg .deck-overlay.lighten3 { background-color: rgba(255, 255, 255, 0.5); } .contentdeck.has-bgimg .deck-overlay.lighten4 { background-color: rgba(255, 255, 255, 0.7); } .contentdeck.has-bgimg .deck-overlay.lighten5 { background-color: rgba(255, 255, 255, 0.9); } /* default in case no opacity is chosen */ .contentdeck.has-bgimg .deck-overlay.overlay-blue-dianne { background-color: rgba(36, 75, 90, 0.5); } .contentdeck.has-bgimg .deck-overlay.overlay-blue-dianne1 { background-color: rgba(36, 75, 90, 0.1); } .contentdeck.has-bgimg .deck-overlay.overlay-blue-dianne2 { background-color: rgba(36, 75, 90, 0.3); } .contentdeck.has-bgimg .deck-overlay.overlay-blue-dianne3 { background-color: rgba(36, 75, 90, 0.5); } .contentdeck.has-bgimg .deck-overlay.overlay-blue-dianne4 { background-color: rgba(36, 75, 90, 0.7); } .contentdeck.has-bgimg .deck-overlay.overlay-blue-dianne5 { background-color: rgba(36, 75, 90, 0.9); } /* banner and content deck background image positioning */ .banner-left-top { background-position: 0 0 !important; } .banner-left-middle { background-position: 0 50% !important; } .banner-left-bottom { background-position: 0 100% !important; } .banner-center-top { background-position: center 0 !important; } .banner-center-middle { background-position: center 50% !important; } .banner-center-bottom { background-position: center 100% !important; } .banner-right-top { background-position: 100% 0 !important; } .banner-right-middle { background-position: 100% 50% !important; } .banner-right-bottom { background-position: 100% 100% !important; } /* boxed deck option */ .contentdeck.boxed-deck .multicol-inner { padding: 40px 40px 40px 40px !important; margin: 20px; background: #fff; border-radius: 10px; border: 1px solid #ededed; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; color: #63666A; } .contentdeck.boxed-deck .multicol-inner h2, .contentdeck.boxed-deck .multicol-inner h3, .contentdeck.boxed-deck .multicol-inner h4, .contentdeck.boxed-deck .multicol-inner h5, .contentdeck.boxed-deck .multicol-inner h6, .contentdeck.boxed-deck .multicol-inner .deck-title, .contentdeck.boxed-deck .multicol-inner .intro {color: #244B5A !important;} .contentdeck.boxed-deck .multicol-inner a:link {color: #EF4636;} .contentdeck.boxed-deck .multicol-inner a:visited {color: #000000;} .contentdeck.boxed-deck .multicol-inner a:hover, .contentdeck.boxed-deck .multicol-inner a:active {color: #EF4636;} .contentdeck.boxed-deck .multicol-inner p {color: #000000 !important;} /* boxes around columns option */ .contentdeck.boxed-columns .multicol1>.inner, .contentdeck.boxed-columns .multicol2 > .inner, .contentdeck.boxed-columns .multicol3 > .inner, .contentdeck.boxed-columns .multicol4 > .inner, .contentdeck.boxed-columns .multicol5 > .inner{ border-radius: 10px; border: 1px solid #ededed; background: #fff; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; color: #333 !important; margin: 10px 5%; padding: 20px; } div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner h2, div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner h3, div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner h4, div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner h5, div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner h6, div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner .intro, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner h2, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner h3, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner h4, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner h5, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner h6, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner .intro, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner h2, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner h3, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner h4, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner h5, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner h6, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner .intro, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner h2, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner h3, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner h4, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner h5, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner h6, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner .intro, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner h2, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner h3, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner h4, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner h5, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner h6, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner .intro { color: #244B5A; } div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner, div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner p, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner p, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner p, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner p, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner p { color: #000000; } div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner a, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner a, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner a, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner a, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner a { color: #EF4636; } /* padding removal option for content decks */ div.contentdeck .deckinner.no-padding {padding-top: 0 !important; padding-bottom: 0 !important;} div.contentdeck .deckinner.no-padding-top {padding-top: 0 !important;} div.contentdeck .deckinner.no-padding-bottom {padding-bottom: 0 !important;} /* removes padding from both deck and inner deck area on drip pans */ div.contentdeck.drip-pan .deckinner.no-padding, div.contentdeck.drip-pan .deckinner.no-padding .multicol-inner {padding-top: 0 !important; padding-bottom: 0 !important;} div.contentdeck.drip-pan .deckinner.no-padding-top, div.contentdeck.drip-pan .deckinner.no-padding-top .multicol-inner {padding-top: 0 !important;} div.contentdeck.drip-pan .deckinner.no-padding-bottom,div.contentdeck.drip-pan .deckinner.no-padding-bottom .multicol-inner {padding-bottom: 0 !important;} /* -------------- =.= Featured Rates Content Decks (BIT TYPE) -------------- */ .rate-feature { min-height: 245px; min-height: 180px; color: #244B5A; text-align: center; font-family: 'Montserrat', sans-serif; } .feature-icon { font-size: 4rem; text-align: center; } .feature-title a {text-decoration: none; color: #244B5A !important;} .feature-title a:hover {text-decoration: underline;} .feature-title { font-size: 1.75rem; line-height: 110%; font-weight: 700; margin: 0 0 5px 0; text-align: center; } .feature-copy, .feature-copy p { text-align: center; line-height: 1.2; } .feature-rate-txt-box { text-align: center; padding: 10px 0; line-height: 1.2; } .feature-lrgtxt { font-size: 3.125rem; text-align: center; font-weight: 700; display: inline-block; clear: both; } .feature-smtxt { font-size: .8rem; display: inline-block; clear: both; } .feature-cta { text-align: center; margin: 10px 10px 0 10px; } .cta-override-area {display: inline-block;} @media screen and (max-width: 767px) { .cta-override-area {text-align: center; display: block;} } .feature-cta div.cta a {width: auto; } div.content div.contentdeck.featured-rates-deck div.onethird div.cta a {width: auto;} .iconfeature { margin: 10px 0; } /*theres a heading in the icon feature bit type .feature-icon-title { display: block; margin-top: 20px; } .featureblock h4, .feature-icon-title a { font-weight: 700; text-decoration: none; font-size: 1.25rem; margin: 20px 0 0 0; } .ratefeature h4 { font-size: 22px; font-size: 1.5rem; font-weight: 700; } div.contentdeck .ratefeature h4 { margin: 0; }*/ /*font awesome icons*/ .iconfeature .fa { font-size: 6rem; } .iconfeature .fas { font-size: 6rem; } .iconfeature .far { font-size: 6rem; } .iconfeature .fal { font-size: 6rem; } div.feature-height { min-height: 102px; min-width: 102px; } /*iconic icons*/ .iconfeature .iconic { font-size: 3.3rem; } @media screen and (max-width: 1000px) { /* fit in sidebars and columns */ .feature-title { font-size: 1.5rem; } .feature-lrgtxt { font-size: 2.25rem; } .feature-medtxt, .feature-medtxt p { font-size: 1.25rem; line-height: 1; } .feature-copy, .feature-copy p { font-size: 1.15rem; } .iconfeature .far { font-size: 3rem; } } @media screen and (max-width: 767px) { /* back to normal */ .feature-title { font-size: 1.75rem; } .feature-lrgtxt { font-size: 3.75rem; } .feature-medtxt, .feature-medtxt p { font-size: 1.75rem; } .feature-copy, .feature-copy p { font-size: 1.3125rem; } .iconfeature .far { font-size: 6rem; } .contentdeck .deckinner.homepage-rate-icon-bar .multicol-inner { padding: 30px !important; } .contentdeck .deckinner.homepage-rate-icon-bar .inner { padding: 20px !important; } .rate-feature { min-height: 0; margin: 30px 10px; /* space out features */ } } @media screen and (max-width: 500px) { /* back to normal */ .feature-title { font-size: 1.5rem; } .feature-lrgtxt { font-size: 2.75rem; } .feature-icon { font-size: 3.5rem; } } /* -------------- =.= FEATURED PRODUCT / SERVICE DECKS -------------- */ /*post templates also use "feature-img"*/ div.feature-img { width: 100%; max-width: 85%; } div.feature-img img {border-radius: 25px;} /*alignment in prod/serv decks is based on photo alignment class "photo-align"*/ .deck-distinct .multicol1 { width: 50%; } .deck-distinct .multicol2 { width: 50%; } .deck-distinct .multicol2 .multicol-inner { padding: 0 !important; display: flex; justify-content: center; align-items: center; } .feature-img.colleft, .feature-img.colright { margin: 20px; } .photo-align-left .deck-distinct { } .photo-align-right .deck-distinct{ flex-direction: row-reverse; } /* div.image-round { width: 100vw; max-width: 27em; height: calc(100vw * (15/16)); max-height: calc(27em * (15/16)); padding: 0; } div.feature-img.image-round img{ border-radius: 50%; width: 100%; height: 100%; }*/ div.image-round { width: 400px; height: 400px; padding: 0; overflow:hidden; } div.feature-img.image-round img{ border-radius: 50%; width: 100%; height: 100%; } @media screen and (max-width: 1000px) { div.feature-img.image-round img { width: 300px; height: 300px; } } @media screen and (max-width: 767px) { div.feature-img.image-round { width: auto; height: auto; } div.feature-img.image-round img { border-radius: 25px; width: auto; height: auto; } } /* -------------- Step List Decks -------------- */ /* not used on this site */ /* -------------- DISTINCT "BOX" DECKS (Step Lists) -------------- */ /* not used on this site */ /*DISTINCT DECK TYPE MEDIA QUERIES*/ @media screen and (max-width: 990px) { .deck-distinct .multicol-inner { padding: 50px 30px; } .distinct-box-align.colleft .distinct-box-col { margin: 50px 0 50px 30px; } .distinct-box-align.colright .distinct-box-col { margin: 50px 30px 50px 0; } } @media screen and (max-width: 767px) { div.contentdeck .deckinner.deck-distinct {flex-wrap: wrap;} div.contentdeck.photo-align-right, div.contentdeck.photo-align-left {flex-direction: column;} .deck-distinct .multicol1, .deck-distinct .multicol2 { display: block !important; width: auto !important; margin: auto; float: none; } .deck-distinct .multicol-inner { padding: 0 10px !important; } /*prod/serv decks .photo-align.colleft .feature-img.colleft, .photo-align.colright .feature-img.colright { float: left; margin: 20px auto; padding: 0 10px !important; }*/ /*step list decks*/ .distinct-box-align.colleft .distinct-box-col.colleft, .distinct-box-align.colright .distinct-box-col.colright { float: left; margin: auto; } .distinct-box-align.colleft .distinct-box-col { margin: 50px 0; } .distinct-box-align.colright .distinct-box-col { margin: 50px 0; } .step-list.step-list-col1 li:last-child { padding-bottom: 4rem; height: inherit; } .step-list.step-list-col1 li:last-child:after { border-color: #335C81; } .step-list.step-list-col1 { margin-bottom: 0; } .step-list.step-list-col2 { margin-top: 0; } } /* -------------- Custom Button Styling -------------- */ input[type=button], input[type=submit], a.button, a.button:link, a.button:visited, button { border: none; background-color: #007D80; /* Default Button if no style is chosen */ font-size: 1.35rem; padding: 3px 8px 3px 10px; cursor: pointer; color: #fff; margin: 5px 0; text-decoration: none; transition-delay: 0s; transition-duration: 0.15s; transition-property: all; transition-timing-function: cubic-bezier(0.49, 0.99, 0.54, 0.98); max-width: 100%; display: inline-block; font-family: Montserrat, sans-serif; border-radius: 0; border: 2px solid #007D80; line-height: 1.7; } /* NEW CHEVRON follower */ input[type=button]:after, input[type=submit]:after, a.button:after, button.button:after { content: ''; display: inline-block; vertical-align: middle; background: url("chevron-right-black.svg") no-repeat center/contain; filter: invert(99%) sepia(1%) saturate(1911%) hue-rotate(187deg) brightness(118%) contrast(100%); /* white chevron*/ width: 1.1em; height: 1.1em; margin-left: 4px; /* Space between text and icon */ opacity: .9; } input[type=button]:hover, input[type=submit]:hover, a.button:hover, button:hover { cursor: pointer; transition: all 0.4s cubic-bezier(0.49, 0.99, 0.54, 0.98); background-color: #007D80; color: #fff; opacity: 0.9; } input[type=button]:active, input[type=submit]:active, a.button:active, button:active { border: none; background-color: #007D80; color: #fff; } a.button1, a.button1:link, a.button1:visited, button.button1, div.contentdeck a.button1, div.contentdeck a.button1:link, div.contentdeck a.button1:visited, div.contentdeck button.button1 { background-color: #007D80; /* St. Tropaz Blue now GREEN Button */ color: #fff !important; border: 2px solid #007D80; } a.button1:hover, button.button1:hover, div.contentdeck a.button1:hover, div.contentdeck button.button1:hover { background-color: #007D80; color: #fff !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button1:after, button.button1:after, .button.button1:after {filter: invert(99%) sepia(1%) saturate(1911%) hue-rotate(187deg) brightness(118%) contrast(100%); /* white chevron */} a.button2, a.button2:link, a.button2:visited, button.button2, div.contentdeck a.button2, div.contentdeck a.button2:link, div.contentdeck a.button2:visited, div.contentdeck button.button2 { background-color: #244B5A; /* Blue Dianne now DARK SLATE GRAY now DUSK Button */ color: #fff !important; border: 2px solid #244B5A; } a.button2:hover, button.button2:hover, div.contentdeck a.button2:hover, div.contentdeck button.button2:hover { background-color: #244B5A; color: #fff !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button2:after, button.button2:after, .button.button2:after {filter: invert(99%) sepia(1%) saturate(1911%) hue-rotate(187deg) brightness(118%) contrast(100%); /* white chevron */} a.button3, a.button3:link, a.button3:visited, button.button3, div.contentdeck a.button3, div.contentdeck a.button3:link, div.contentdeck a.button3:visited, div.contentdeck button.button3 { background-color: #DCE4E2; /* Geyser now GRAY Button */ color: #252525 !important; border: 2px solid #DCE4E2; } a.button3:hover, button.button3:hover, div.contentdeck a.button3:hover, div.contentdeck button.button3:hover { background-color: #DCE4E2; color: #252525 !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button3:after, button.button3:after, button.button3:after {filter: none; /* black chevron */} a.button4, a.button4:link, a.button4:visited, button.button4, div.contentdeck a.button4, div.contentdeck a.button4:link, div.contentdeck a.button4:visited, div.contentdeck button.button4 { background-color: #FEBE2C; /* Saffron now GOLDEN HOUR Button */ color: #252525 !important; border: 2px solid #FEBE2C; } a.button4:hover, button.button4:hover, div.contentdeck a.button4:hover, div.contentdeck button.button4:hover { background-color: #FEBE2C; color: #252525 !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button4:after, button.button4:after, button.button4:after {filter: none; /* black chevron */} a.button5, a.button5:link, a.button5:visited, button.button5, div.contentdeck a.button5, div.contentdeck a.button5:link, div.contentdeck a.button5:visited, div.contentdeck button.button5 { background-color: #00A9BC; /* Pelorous now BLUE now BLUE GRASS Button */ color: #252525 !important; border: 2px solid #00A9BC; } a.button5:hover, button.button5:hover, div.contentdeck a.button5:hover, div.contentdeck button.button5:hover { background-color: #00A9BC; color: #252525 !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button5:after, button.button5:after, button.button5:after {filter: none; /* black chevron */} a.button6, a.button6:link, a.button6:visited, button.button6, div.contentdeck a.button6, div.contentdeck a.button6:link, div.contentdeck a.button6:visited, div.contentdeck button.button6 { background-color: #EF4636; /* Eminence now RED-ORANGE Button */ color: #000 !important; border: 2px solid #EF4636; } a.button6:hover, button.button6:hover, div.contentdeck a.button6:hover, div.contentdeck button.button6:hover { background-color: #EF4636; color: #000 !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button6:after, button.button6:after, .button.button6:after {filter: none; /* black chevron */} a.button7, a.button7:link, a.button7:visited, button.button7, div.contentdeck a.button7, div.contentdeck a.button7:link, div.contentdeck a.button7:visited, div.contentdeck button.button7 { background-color: #A12D4D; /* Monarch still MONARCH Button */ color: #FFF !important; border: 2px solid #A12D4D; } a.button7:hover, button.button7:hover, div.contentdeck a.button7:hover, div.contentdeck button.button7:hover { background-color: #A12D4D; color: #FFF !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button7:after, button.button7:after, .button.button7:after {filter: invert(99%) sepia(1%) saturate(1911%) hue-rotate(187deg) brightness(118%) contrast(100%); /* white chevron */} a.button10, a.button10:link, a.button10:visited, button.button10, div.contentdeck a.button10, div.contentdeck a.button10:link, div.contentdeck a.button10:visited, div.contentdeck button.button10 { background-color: #B2BEDC; /* NEW Light Purple Button */ color: #000 !important; border: 2px solid #B2BEDC; } a.button10:hover, button.button10:hover, div.contentdeck a.button10:hover, div.contentdeck button.button10:hover { background-color: #B2BEDC; color: #000 !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); } a.button10:after, button.button10:after, button.button10:after {filter: none; /* black chevron */} /* Reversed CTAs and buttons used in bit types */ a.button1.button-reversed, a.button1.button-reversed:link, a.button1.button-reversed:visited, button.button1.button-reversed, div.contentdeck a.button1.button-reversed, div.contentdeck a.button1.button-reversed:link, div.contentdeck a.button1.button-reversed:visited, div.contentdeck button.button1.button-reversed { background-color: #fff; /* St. Tropaz Blue now GREEN Button Reversed */ color: #007D80 !important; border: 2px solid #007D80; } a.button1.button-reversed:after {filter: invert(32%) sepia(21%) saturate(3480%) hue-rotate(146deg) brightness(103%) contrast(102%);} a.button2.button-reversed, a.button2.button-reversed:link, a.button2.button-reversed:visited, button.button2.button-reversed, div.contentdeck a.button2.button-reversed, div.contentdeck a.button2.button-reversed:link, div.contentdeck a.button2.button-reversed:visited, div.contentdeck button.button2.button-reversed { background-color: #fff; /* Blue Dianne now DARK SLATE GRAY now DUSK Button Reversed*/ color: #244B5A !important; border: 2px solid #244B5A; } a.button2.button-reversed:after {filter: invert(18%) sepia(6%) saturate(5072%) hue-rotate(151deg) brightness(107%) contrast(78%);} a.button3.button-reversed, a.button3.button-reversed:link, a.button3.button-reversed:visited, button.button3.button-reversed, div.contentdeck a.button3.button-reversed, div.contentdeck a.button3.button-reversed:link, div.contentdeck a.button3.button-reversed:visited, div.contentdeck button.button3.button-reversed { background-color: #fff; /* Geyser Button now GRAY Reversed */ color: #000 !important; border: 2px solid #DCE4E2; } a.button3.button-reversed:after {filter: invert(93%) sepia(7%) saturate(131%) hue-rotate(114deg) brightness(98%) contrast(90%);} a.button4.button-reversed, a.button4.button-reversed:link, a.button4.button-reversed:visited, button.button4.button-reversed, div.contentdeck a.button4.button-reversed, div.contentdeck a.button4.button-reversed:link, div.contentdeck a.button4.button-reversed:visited, div.contentdeck button.button4.button-reversed { background-color: #fff; /* Saffron now GOLDEN HOUR Button Reversed */ color: #000 !important; border: 2px solid #FEBE2C; } a.button4.button-reversed:after {filter: invert(75%) sepia(97%) saturate(590%) hue-rotate(333deg) brightness(101%) contrast(99%);} a.button5.button-reversed, a.button5.button-reversed:link, a.button5.button-reversed:visited, button.button5.button-reversed, div.contentdeck a.button5.button-reversed, div.contentdeck a.button5.button-reversed:link, div.contentdeck a.button5.button-reversed:visited, div.contentdeck button.button5.button-reversed { background-color: #fff; /* Pelorous now BLUE GRASS Button Reversed */ color: #000 !important; border: 2px solid #00A9BC; } a.button5.button-reversed:after {filter: invert(41%) sepia(22%) saturate(5055%) hue-rotate(158deg) brightness(101%) contrast(101%);} a.button6.button-reversed, a.button6.button-reversed:link, a.button6.button-reversed:visited, button.button6.button-reversed, div.contentdeck a.button6.button-reversed, div.contentdeck a.button6.button-reversed:link, div.contentdeck a.button6.button-reversed:visited, div.contentdeck button.button6.button-reversed { background-color: #fff; /* Eminence now RED-ORANGE Button Reversed */ color: #000 !important; border: 2px solid #EF4636; } a.button6.button-reversed:after {filter: invert(39%) sepia(86%) saturate(1670%) hue-rotate(336deg) brightness(91%) contrast(107%);} a.button7.button-reversed, a.button7.button-reversed:link, a.button7.button-reversed:visited, button.button7.button-reversed, div.contentdeck a.button7.button-reversed, div.contentdeck a.button7.button-reversed:link, div.contentdeck a.button7.button-reversed:visited, div.contentdeck button.button7.button-reversed { background-color: #fff; /* Monarch still MONARCH Button Reversed */ color: #A12D4D !important; border: 2px solid #A12D4D; } a.button7.button-reversed:after {filter: invert(27%) sepia(12%) saturate(5767%) hue-rotate(306deg) brightness(93%) contrast(98%);} /* button8 used for temp WealthTrek and button 9 skipped */ a.button10.button-reversed, a.button10.button-reversed:link, a.button10.button-reversed:visited, button.button10.button-reversed, div.contentdeck a.button10.button-reversed, div.contentdeck a.button10.button-reversed:link, div.contentdeck a.button10.button-reversed:visited, div.contentdeck button.button10.button-reversed { background-color: #fff; /* NEW Light Purple Button Reversed */ color: #000 !important; border: 2px solid #B2BEDC; } a.button10.button-reversed:after {filter: invert(71%) sepia(52%) saturate(188%) hue-rotate(185deg) brightness(88%) contrast(88%);} /* alert button fix - alert colors were overriding button colors - not sure if needed still .alert input[type=button], .alertinput[type=submit], .alert a.button, .alert a.button:link, .alert a.button:visited, .alert button { color: #000 !important; } .alert a.button1, .alert a.button1:link, .alert a.button1:visited, .alert button.button1 { color: #C0D6DF !important; } .alert a.button1:hover, .alert button.button1:hover { color: #000 !important; } .alert a.button2, .alert a.button2:link, .alert a.button2:visited, .alert button.button2 { color: #000 !important; } .alert a.button2:hover, .alert button.button2:hover { color: #fff !important; } .alert a.button3, .alert a.button3:link, .alert a.button3:visited, .alert button.button3 { color: #000 !important; } .alert a.button3:hover, .alert button.button3:hover { color: #C0D6DF !important; } .alert a.button4, .alert a.button4:link, .alert a.button4:visited, .alert button.button4 { color: #fff !important; } .alert a.button4:hover, .alert button.button4:hover { color: #000 !important; } */ /* -------------- =.= Default Buttons -------------- */ a.back-button { display: block; padding: 5px 10px; background-color: #f5f5f5; color: #333; font-weight: normal; cursor: pointer; font-size: 12px; font-size: 0.75rem; text-transform: uppercase; float: right !important; width: 50px; margin: 1em; } a.back-button:hover { box-shadow: 0 0 1px 1px #dfe5e5; } a.back-button:active { box-shadow: 0 0 1px 1px #dfe5e5; } /* -------------- =.= Calls to Action (BIT TYPE) -------------- */ div.call-to-action { display: inline-block; clear: right; margin: 0 10px; } div.call-to-action a.button { text-align: center; max-width: 100%;} div.content div.call-to-action { clear: both; } /*.deck-distinct div.call-to-action { min-width: 270px; } @media screen and (max-width:767px) { .deck-distinct div.call-to-action { min-width: 200px;} }*/ .deck-distinct div.call-to-action a { display: block; } /* specific CTA styles removed - using button styles */ div.sidebar div.call-to-action, div.sidebar div.call-to-action a, div.sidebar-mobile div.call-to-action, div.sidebar-mobile div.call-to-action a { display: block; margin: 10px 0; } /* -------------- =.= Promotions & Testimonials -------------- */ .promotion { padding: 0; margin: 0 0 15px 0; background: transparent; border-radius: 5px; display: block; border: none; line-height: 1.3; } .promotion .inner { padding: 46px 26px 26px 26px; } .promotion p { font-size: 1rem; text-align: left; margin: 10px 0; font-family: inherit; font-weight: inherit; } .promotion .promo-title { padding-top: 0 !important; margin-top: 0 !important; font-weight: 700; font-size: 1.625rem; font-family: 'Montserrat', sans-serif; } /*Theme 1*/ .promotion.theme1 { background-color: #EF4636; /* Color Block Eminence - Now Red Orange*/ color: #fff; } .promotion.theme1 .promo-title { color: #fff; } /*Theme 2*/ .promotion.theme2 { background-color: #007D80; /* Color Block St. Tropaz Now Green*/ color: #fff; } .promotion.theme2 .promo-title { color: #fff; } /*Theme 3*/ .promotion.theme3 { background-color: #FFF; /* Border St. Tropaz - Now Green*/ border: solid 2px #007D80; color: #000000; } .promotion.theme3 .promo-title { color: #244B5A; } /*Theme 4*/ .promotion.theme4 { background-color: #fff; /* Border Limeade - Now Light Purple */ border: solid 2px #B2BEDC; color: #000000; } .promotion.theme4 .promo-title { color: #244B5A; } /*Begin Testimonials*/ .testimonial { position: relative; margin-bottom: 15px; background-color: transparent; color: #244B5A; border: none; } .testimonial .inner {padding: 36px;} .testimonial p { display: inline; font-style: normal; font-size: 1.125rem; margin: 0; font-family: 'Montserrat', sans-serif; color: #244B5A; font-weight: 700; } /*testimonial down arrow*/ .testimonial:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: transparent; border-width: 18px; margin-left: 25px; right: 25px; } .testimonial-theme1 { background-color: #fff; border: solid 5px #FF4713; } .testimonial.testimonial-theme1:after { border-top-color: #FF4713; } .testimonial-theme2 { background-color: #fff; border: solid 5px #A12D4D; } .testimonial.testimonial-theme2:after { border-top-color: #A12D4D; } .testimonial-author { margin: 15px 10px 0 10px; display: block; text-align: right; } .testimonial-author p { font-family: 'Montserrat', sans-serif; color: #244B5A; font-size: 1.125rem; font-weight: 700; } /*testimonial speech marks removed per JP - use normal quotes instead*/ /*end testimonial*/ /* -------------- =.= Cross Selling Blocks (Bit Type) -------------- */ .crosssell-container h3 {margin: 30px auto 50px auto; text-align: center;} .crosssell { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; } .crosssell-block { padding: 0 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; max-width: 400px; /* match to image width */ } .crosssell-title { font-weight: 600; padding: 10px 10px 40px 10px; font-size: 1.25rem; line-height: 1.3; } .crosssell-block a {text-decoration: none;} .crosssell-block a:hover {text-decoration: underline; } .crosssell-block .image-constraint {/* maybe not needed after all*/} .crosssell-block .image-constraint img { border-radius: 25px; transition: transform 0.2s ease-in-out; object-fit: cover; object-position: 50% 50%; width: 400px; /* match to block width */ height: 300px; } .crosssell-block .image-constraint :hover { transform: scale(1.02); box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%);} @media screen and (max-width: 767px) { .crosssell-block { width: auto; max-width: 100%; margin-left: 40px; margin-right: 40px; } .crosssell-block .image-constraint img { width: auto; height: auto; } } @media screen and (max-width: 600px) { } @media screen and (max-width: 440px) { } /* -------------- =.= Quick Text Formatting -------------- */ .txt-center { text-align: center !important; } .txt-left { text-align: left !important; } .txt-right { text-align: right !important; } .bullet:before {/* filled circle */ content: '\f111'; font-family: 'Font Awesome 7 Pro'; font-weight: 900; display: inline-block; font-size: inherit; margin: 0 7px 0 0; } /* -------------- =.= Show/Hide and Other Display Visuals -------------- */ .hidden, .hide, .hidediv { display: none; } .show { display: block; } td.show, th.show { display: table-cell; } .inline, ul.inline li, ol.inline li { display: inline; } .pointer { cursor: pointer; } /* -------------- =.= Site Layout Elements -------------- */ .wrapper { max-width: 100%; margin: auto; } .wrapper-inner { margin: auto; } .page-inner, .deck-inner { max-width: 1440px; margin: auto; padding: 0 20px; position: relative; clear: both; } .page-inner, .header-inner, .footer-inner, .deckinner { max-width: 1440px; margin: auto; padding: 0; position: relative; clear: both; } .subnav-mobile, .sidebar-mobile { display: none; } body.blank_wrapper h1 { margin-top: 0; } /* -------------- =.= Mobile Header / Menu -------------- */ /* menu is the same at desktop and mobile */ /* -------------- =.= Header Elements -------------- */ .header { width: 100%; /* height: 75px; */ transition: all .5s ease; } div.col-apply a, button.search-button, button.locator-button, button.menu-icon, a.logo-desktop, a.logo-mobile, a.logo-sticky { transition: all .5s ease;} /*header with banner*/ /*.wrapper.hasbanner .default-title {display: none; height: 0; transition: none;}*/ /*header without banner*/ .wrapper .header { position: relative; background: transparent; /*max-width: 1440px;*/ margin: auto; z-index: 3; box-shadow: 0px 12px 18px 0 rgba(156, 172, 211, 0.5); } /*.wrapper.hasnobanner .header { position: relative; background: #223A76; max-width: 1440px; margin: auto; }*/ /* .wrapper.hasnobanner .wrapper_inner { margin-top: 100px; update scrolled-margin if this is changed } */ /*@media screen and (max-width: 767px) { .wrapper.hasnobanner .wrapper_inner { margin-top: 30px; } div.wrapper.hasnobanner div.wrapper_inner.scrolled-margin { margin-top: 150px !important; } }*/ /*.wrapper.hasnobanner div.subnav { margin-top: 103px; }*/ body.bodyclass_blank_wrapper .wrapper { /* margin-top: 20px;*/ } div.header-inner { text-align: left; display: flex; justify-content: space-between; align-items: center; align-content: space-between; position: relative; } div.col-logo { max-width: 400px; /*width: 100%;*/ } div.col-logo a { display: block; } div.col-logo a:focus { outline: transparent solid 1px;} .col-logo a.logo-2025 {display:block;} .col-logo a.logo-mobile {display:none;} .col-logo a.logo-sticky {display: none;} .col-logo a.logo-sticky img {height: 0; transition: all .8s ease;} div.header-corral { text-align: left; display: flex; justify-content: flex-end; align-items: center; align-content: space-between; width: auto; } div.header-corral div.col-header { padding: 10px; } .col-logo img { margin: 10px; width: auto; height: 56px; transition: all .8s ease; } .header-search, .header-location { margin: 0 auto 0 auto; } /* bring icons and login to the front - higher than mega-menu top spacer */ .header .col-logo, .header .col-oblogin, .header .col-menu, .header .header-corral { z-index: 4; position: relative; } /* mobile menu stuff, custom to this site */ div.col-menu.menu-desktop {display: block;} div.col-menu.menu-mobile {display: none;} div.col-apply a {text-decoration: none; color: #000; font-size: 1rem;} .header-icon, .col-menu, .col-apply {transition: all .3s ease;} .header-icon:hover, .col-menu:hover {transform: scale(1.2);} div.col-apply:hover {text-decoration: underline;} div.col-apply, div.col-join, div.col-oblogin, div.header-icon, div.col-menu {margin: 0 10px;} div.col-oblogin button:hover {box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%) !important;} @media screen and (max-width: 1000px) { div.col-apply a {font-size: .8rem;} div.col-apply a:focus {font-size: 1rem;} div.col-apply, div.col-join, div.col-oblogin, div.header-icon, div.col-menu {margin: 5px;} div.col-join {display: none;} } @media screen and (max-width: 767px) { div.header-corral {margin-top: 5px;} div.col-menu.menu-desktop {display: none;} div.col-menu.menu-mobile {display: block;} .header-corral .col-join, .header-corral .col-apply, .header-corral .col-oblogin {display: none;} .mobile-corral {background-color: #fff; text-align: center; padding: 10px 0; border-bottom: 2px solid #EDEDED; display: flex; justify-content: center; align-items: center;} .mobile-corral .col-join, .mobile-corral .col-apply, .mobile-corral .col-oblogin {display: inline-block;} .mobile-corral div.col-apply a {color: #3367D6; text-align: center; font-size: .9rem; font-weight: 600;} /* moving login back to header at mobile size by request - different than mockup */ .header-corral .col-oblogin {display: inline-block;} .mobile-corral .col-oblogin {display: none;} .col-logo img {height: 35px;} /* logo for logo-footer-only template */ .header.header-logo-only div.col-logo {max-width: 100%; width: 100%; text-align: center;} } @media screen and (max-width: 400px) { div.col-apply, div.col-join, div.col-oblogin, div.header-icon, div.col-menu {margin: 0 5px;} .col-logo img {height: 32px;} } @media screen and (max-width: 330px) { /* making room for login button */ .col-logo a:first-child {display: none;} .col-logo a:last-child {display: block;} div.header-inner {justify-content: center;} } @media screen and (max-width: 300px) { div.col-apply, div.col-join, div.col-oblogin, div.header-icon, div.col-menu {margin: 0 5px;} .col-logo img {height: 38px;} } /* -------------- =.= Online Banking Login -------------- */ .ob-title { font-size: 1.25rem; font-weight: 700; width: auto; } /* this is the login box wrapper */ .oblogin { position: absolute; right: 10px; top: 20px; width: auto; z-index: 3; /* lower than mega-menu */ } .ob-login-box { background-color: #FFF; padding: 20px 30px 10px 30px; min-width: 300px; max-width: 345px; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px; border-radius: 8px; border: 1px solid #eee; } .arrow-up { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid white; position: absolute; right: calc(50% - 15px); top: -14px; transition: none; } .ob-login-box div.form-field {display: block;} div.ob-login-box label, div.banking-inputs {text-align: left;} .ob-login-box input[type=text], div.ob-login-box input[type=password] { padding: 10px; font-size: 1rem; font-family: inherit; display: inline-block; vertical-align: bottom; margin: 8px auto; border-radius: 3px; border: 1px solid #CCC; max-width: 100%; color: #102B3F; } div.bank-submit-block {display: flex; align-items: center; justify-content: space-between;} .ob-login-footlinks { font-size: .8rem; margin: 20px 20px 20px 0; clear: both; width: auto; text-align: left; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; max-width: 200px; } .ob-login-footlinks a { margin: 0 15px 0 0; } button.bank-submit {padding: 20px;} button.olb-close {display: none;} .header-banking { padding: 0 !important; margin: 0 auto !important; width: 100%; position: absolute; bottom: 0; right: 0; display: block; z-index: 4; } .header-banking .inner { margin: auto; padding: 0; width: 100%; max-width: 1440px; position: relative; } .ob-login-box.banking_disabled { padding: 5px; } .ob-login-box .banking-disabled { padding: 20px 20px 0 20px; font-size: 1rem; color: #000; background: #fff; max-width: 500px; } @media screen and (max-width: 1300px) { .arrow-up {right: calc(50% - 30px);} } @media screen and (max-width: 767px) { .header-banking {position: relative; width: 100%; top: auto; right: auto;} .oblogin {top: 5px; left: 3%;} .ob-login-box {min-width: 0; padding: 20px; max-width: 100%;} .ob-login-box a { margin: 0 5px; } .arrow-up {display: none;} div.bank-submit-block {display: block;} div.bank-submit button {width: 100%;} .ob-login-footlinks { max-width: 100%; justify-content: center;} } .search_form, .locator_form {flex: 1;} .search-box, .locator-box { position: absolute; display: flex; align-items: center; gap: 10px; margin: 5px 5px 10px 5px; padding: 0; background-color: #fff; max-width: 100%; border-radius: 5px; z-index: 11; height: 0px; /*width: 0px; this was causing a jump on open*/ transition: height .35s ease; overflow: hidden; width: 100%; text-align: right; } input.search-field, input.locator-field { border: none !important; } .search-box-open, .locator-box-open { height: 65px; width: calc(100% - 10px); } .search-box-open input.search-field, .locator-box-open input.locator-field { width: calc(100% - 100px); margin: 0; padding: 0 10px; font-family: inherit; line-height: 1; background-color: #fff; font-size: 1.25rem; border: 1px solid #f2f2f2; } /* remove conflicting browser clear X from IE and Edge */ .search-box-open input.search-field::-ms-clear, .locator-box-open input.locator-field::-ms-clear { display: none; } input.search-field:focus, input.mobile-search-field:focus, input.locator-field:focus, input.mobile-locator-field:focus { box-shadow: none !important; outline: transparent solid 1px; } button.search-button, button.locator-button { background: none; border: none; margin: 0; color: #000; display: inline-block; position: relative; font-size: 1.5rem; padding: 2px 1px 1px 1px !important; /* fix for icon getting cut off in Safari */ line-height: 1; /*outline: #FFF solid 1px; causes error */ } button.search-button.searchsubmit:hover, button.locator-button.locationsubmit:hover { color: #A12D4D; } button.search-button:focus, button.search-button:active, button.locator-button:focus, button.locator-button:active {outline: transparent solid 1px;} button.search-button.searchsubmit, button.search-button.searchopen, button.locator-button.locatorsubmit, button.locator-button.locatoropen { /* height: 60px; width: 60px;*/ background-color: #FFF; color: #244B5A; border-radius: 0; } button.search-button.searchopen:focus { outline: #dedede solid 1px;} button.search-button.searchclose, button.locator-button.locatorclose { margin: 0 10px 0 0; color: #244B5A; font-size: 1.3rem; font-weight: 100; } button.search-button.searchclose:hover, button.locator-button.locatorclose:hover { color: #A12D4D; } /* fixing the width to reduce shift */ .header-icon {min-width: 26px;} .col-menu.menu-desktop {min-width: 50px;} /* more subtle focus effect */ .col-logo a.logo-2025:focus, .col-oblogin button:focus, .col-join a.button3:focus, div.col-logo a:focus { outline: transparent dotted 1px; transform: scale(1.1); } .col-apply a:focus, button.search-button:focus, button.locator-button:focus, button.menu-icon:focus, .header-chat a:focus, .header-chat a:focus img { outline: transparent dotted 1px; transform: scale(1.3); } button.search-button.searchclose:focus, button.locator-button.locatorclose:focus {transform: scale(1.4);} .col-apply a {transition: none !important;} .col-apply a:focus {font-size: 1.2rem;} .header.scrolled div.col-apply a:focus {font-size: 1.2rem;} /* mobile search styles -- unused on this site --- */ /* -------------- =.= Footer Elements -------------- */ .footer-overlay.darken1 { background-color: rgba(8, 29, 38, 0.1); } .footer-overlay.darken2 { background-color: rgba(8, 29, 38, 0.2); } .footer-overlay.darken3 { background-color: rgba(8, 29, 38, 0.3); } .footer-overlay.darken4 { background-color: rgba(8, 29, 38, 0.4); } .footer-overlay.darken5 { background-color: rgba(8, 29, 38, 0.5); } .footer { overflow: hidden; clear: both; background-color: #244B5A; color: #fff; } .footer, .footer a { color: #fff; font-weight: 400; } .footer .foot-title { color: #fff; font-weight: 600; font-size: 1.625rem; margin: 0 0 15px 0; line-height: normal; } .footer-inner { padding: 20px 20px 60px 20px; } .foot-colleft {} .foot-colright { /*border-left: solid 2px #C0D6DF; */ box-sizing: border-box; } .foot-colleft .inner { padding-left: 0; margin-top: 38px; } .foot-colright .inner { margin-top: 40px; } ul.foot-stack, div.foot-stack { margin: 0 0 0 0; padding: 0; line-height: 1.5; } ul.foot-stack li { list-style: none; margin: 0; clear: left; } ul.foot-stack li.foot-location, ul.foot-stack li.foot-phone {display: flex; align-items: flex-start; margin: 0 0 20px 0;} ul.foot-stack li.foot-location img, ul.foot-stack li.foot-phone img {margin-right: 10px;} ul.foot-stack li.routing, ul.foot-stack li.footer-nav {margin-left: 40px;} ul.foot-stack li.routing {margin-left: 0;} ul.foot-stack li.routing img {margin-right: 5px;} ul.foot-stack li a { text-decoration: underline; } ul.foot-stack li a:hover { text-decoration: none; } .location-meta h3 { font-size: 1.25rem; } .location-meta { font-size: 1rem; margin-bottom: 10px; } ul.social { margin: 0 0; padding: 10px 0 40px 0; list-style: none; display: inline-block; } ul.social li { font-size: 2rem; font-weight: normal; color: #54565A; display: inline-block; margin: 0 12px 0 0; } ul.social li:last-child { margin-right: 0; } ul.social li a:before { font-style: normal; text-decoration: inherit; float: left; font-weight: 400; } ul.social li a { display: inline-block; text-decoration-color: #E6E8ED; text-decoration: none; } ul.social li a:hover { color: #dedede !important; } ul.social li.facebook a:before { font-family: 'Font Awesome 6 Brands'; font-weight: 400; content: "\f09a"; } ul.social li.twitter a:before { font-family: 'Font Awesome 6 Brands'; content: "\f081"; } ul.social li.instagram a:before { font-family: 'Font Awesome 6 Brands'; content: "\f16d"; } ul.social li.linkedin a:before { font-family: 'Font Awesome 6 Brands'; content: "\f0e1"; } ul.social li.pinterest a:before { font-family: 'Font Awesome 6 Brands'; content: "\f0d2"; } ul.social li.youtube a:before { font-family: 'Font Awesome 6 Brands'; content: "\f167"; } ul.social li.yelp a:before { font-family: 'Font Awesome 6 Brands'; content: "\f1e9"; } li.routing {padding-top: 20px;} .copyright{ text-align: center; margin-bottom: 40px; } .compliance { display: flex; justify-content: flex-start; align-items: center; padding: 10px 10px 10px 0; } .disclaimer { line-height: normal;} .ncua, .ehl, .compliance-text {margin: 0 20px 0 0;} .acc-statement {} @media screen and (max-width: 767px) { .copyright {text-align: left;} } /* -------------- =.= Footer Quicklinks (BIT TYPE) -------------- */ div.footer-quicklinks ul { margin: 0 0 50px 0; padding: 0px; list-style: none; } div.footer-quicklinks ul li { margin: 0 20px 0 0; list-style: none; padding: 0; font-size: 1rem; display: inline-block } div.footer-quicklinks p {margin: 0;} div.footer-quicklinks a { text-decoration: underline; } div.footer-quicklinks .fab {font-size: 1.75rem; color: #00A9BC; margin-right: 5px;} div.footer-quicklinks a:hover { text-decoration: none; } .quicklinks-head { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; } div.footer-quicklinks.social-icons ul li {margin: 0 0 10px 0; } div.footer-quicklinks.social-icons ul li div a {display: flex; align-items: center; margin: 0 10px 0 0; text-decoration: none;} div.footer-quicklinks.social-icons ul li div a:hover {text-decoration: underline;} div.footer-quicklinks.social-icons ul li div a:hover img {box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;} div.footer-quicklinks.social-icons ul li div img {margin: 0 10px 0 0;} /* -------------- =.= Navigation -------------- */ /*Styles that apply to all versions of primary main navigation items*/ div.header-desktop div.menu-main { width: auto; display: inline-block; float: right; } div.nav-main { margin: 0 auto; padding: 0; background-color: #DCE4E2; width: 100% } div.nav-main ul.megamenu { margin: 0 auto; padding: 0; display: block; width: 100%; list-style-type: none; list-style-position: inside; display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: 1440px; } /*The list items within the main nav UL*/ div.nav-main ul.megamenu li.nav-item { width: 25%; position: relative; padding: 0; } /*The anchors within the main nav list items*/ div.nav-main ul.megamenu li.nav-item a { text-decoration: none; display: block; padding: 40px 20px 40px 20px; font-size: 1rem; color: #000000; font-weight: 600; font-family: 'Montserrat', sans-serif; text-align: center; } /*The "active state" for anchors within the main nav list items*/ div.nav-main ul.megamenu li a.active { background-color: #fff; } /*The "on state" for anchors within the main nav list items*/ div.nav-main ul.megamenu li a.on { text-decoration: underline; } div.nav-main ul.megamenu li.on a:after {/* caret down */ font-family: 'Font Awesome 7 Pro'; font-size: 24px; font-weight: 900; content: '\f0d7'; color: #1B2845; display: block; z-index: 99; height: 10px; font-size: 32px; font-size: 2rem; position: relative; } /*the main nav item that's hovered or has its menu active (open)*/ div.nav-main ul.nav-menu li.active a, div.nav-main ul.nav-menu li.active a.on { color: #1B2845; } div.nav-main ul.nav-menu li.active ul li a, div.nav-main ul.nav-menu li.active ul li a { color: #1B2845; } div.nav-main ul.nav-menu li.on a.active:after { content: "" !important; } /* the active menu's main nav item state*/ div.nav-main ul.nav-menu li.on a.active {} /* -------------- =.= Mega Menus -------------- */ /*Primary Main Navigation Items for MEGA Menus*/ /*The UL containing the main nav items*/ /* menu icon*/ .header button {box-shadow: none !important;} button.menu-icon { box-sizing: border-box; font-size: 38px; font-size: 2.375rem; height: 50px; width: 50px; margin: 0; padding: 0; background-color: transparent; border-radius: 0; border: none; color: #FFF; } button.menu-icon:focus, button.menu-icon:active {border: none;} button.menu-icon.menu-icon-open.fa-bars:before {content: "\f00d";} /* change to times */ .megabox { width: 100%; position: absolute; /* right: 4px; top: 144px;*/ z-index: 3; margin: 0 auto; padding: 0 0 0 0; /* position: relative;*/ background-color: #fff; box-shadow: 0px 15px 10px -15px rgb(0, 0, 0, 0.25); } .megabox-inner { position: relative; } /*div.megaclose { width: auto; position: absolute; top: -75px; right: -2px; z-index: 1; } button.megaclose-button { box-sizing: border-box; font-size: 2rem; float: right; margin: 3px 0 0 0; color: #000; background-color: #fff; border: 2px solid #1B2845; border-bottom: #fff; width: 70px; height: 62px; border-radius: 0; } button.megaclose-button:hover, button.megaclose-button:focus { background-color: #fff; color: #1B2845; border: 2px solid #1B2845; border-bottom: #fff; }*/ /*Mega Menu Structure and Navigation*/ .mega-wrapper { background-color: #fff; position: relative; z-index: 1000; display: flex !important; justify-content: space-evenly; margin: 0; padding: 0; } .megacontainer { width: 100%; margin: 0; padding: 0; background-color: #fff; } .megacontainer .mega-inner { padding: 20px 20px 0 20px; } div.mega-box {} .mega-subnav-title { display: block; margin: 0; padding: 10px 0; border-bottom: solid 2px #DCE4E2; font-size: 1.2rem; color: #244B5A; font-weight: 700; } ul.mega-subnav { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0; display: flex; justify-content: flex-start; } ul.mega-subnav li.mega-subnav-item { display: block; vertical-align: top; } ul.mega-subnav li { list-style: none; font-size: 18px; font-size: 1.1rem; line-height: 1.1; color: #1B2845; vertical-align: middle; margin: 0 40px 20px 0; } ul.mega-subnav li a { display: block; color: #1B2845; text-decoration: none; font-weight: 600; } ul.mega-subnav li a:hover { color: #1B2845; text-decoration: underline !important; } .megaclose { float: right; margin: 10px 0 0; } ul.mega-subnav.mega-more { padding: 20px 0 10px 0; display: block; } ul.mega-subnav.mega-more li { width: auto; padding: 0; display: block; } ul.mega-subnav.mega-more li a { color: #1B2845; text-decoration: none; font-weight: 400; font-size: 15px; font-size: 0.9375rem; } /* menu adjustments - Flat layout for single items */ div.megacontainer.mega-1 ul.mega-subnav li.mega-subnav-item { min-width: 15%;} /* fitting sixth menu */ div.megacontainer.mega-1 ul.mega-subnav li {margin-right: 1.5%;} div.megacontainer.mega-1 ul.mega-subnav li:last-child {margin-right: 0;} @media screen and (max-width: 1340px) { div.megacontainer.mega-1 .mega-subnav-title {font-size: 1rem;} } div.megacontainer.mega-2 ul.mega-subnav li.mega-subnav-item { min-width: 17%;} div.megacontainer.mega-2 ul.mega-subnav.mega-more li{ } div.megacontainer.mega-3 ul.mega-subnav li.mega-subnav-item {width: 100%; margin: 0 40px 20px 20px;} div.megacontainer.mega-3 ul.mega-subnav.mega-more li{display: inline-block;} div.megacontainer.mega-4 ul.mega-subnav li.mega-subnav-item {width: 50%; margin: 0 40px 20px 20px;} div.megacontainer.mega-4 ul.mega-subnav.mega-more li{display: inline-block;} div.megacontainer.mega-5 ul.mega-subnav li.mega-subnav-item {width: 50%; margin: 0 40px 20px 20px;} div.megacontainer.mega-5 ul.mega-subnav.mega-more li{display: inline-block;} div.megacontainer.mega-6 ul.mega-subnav li.mega-subnav-item {width: 100%; margin: 0 40px 20px 20px;} div.megacontainer.mega-6 ul.mega-subnav.mega-more li{display: inline-block;} /* -------------- =.= Dropdown Menus -------------- */ /*Primary Main Navigation Items for DROPDOWN Menus*/ /*The UL containing the main nav items for dropdown menus only*/ div.nav-main ul.dropdown { list-style: none; position: relative; z-index: 1000; overflow: visible; margin: 46px 0 0 0; padding: 0; display: block; width: auto; float: right; list-style-type: none; list-style-position: inside; max-width: 1440px; } div.nav-main ul.dropdown li.nav-item { display: inline-block; position: relative; padding: 0; float: left; } /*The anchors within the main nav list items*/ div.nav-main ul.dropdown li.nav-item a { text-decoration: none; display: block; text-align: center; padding: 20px 30px; font-size: 2rem; color: #1B2845; font-weight: 600; text-transform: uppercase; } /*The "on state" for anchors within the main nav list items*/ div.nav-main ul.megamenu li a.on { color: #4186A5; } /*The UL that contains the subnav items in the dropdown menu*/ ul.dropdown ul.sub_menu { display: none; position: absolute; padding: 0; margin: 0; width: auto; min-width: 350px; max-width: 450px; top: 65px; z-index: 100000000000; /*always be in front*/ clear: both; border: none; background-color: #fff; text-align: left; list-style: none; } /*Make the 4th and 5th nav items have a menu that is aligned right so they don't fly off the page*/ div.nav-main ul.nav-menu.dropdown li.nav4 ul.sub_menu { right: 0 !important; } div.nav-main ul.nav-menu.dropdown li:last-child ul.sub_menu { right: 0 !important; } /*The list items that make up the sub nav in the dropdown menus*/ div.nav-main ul.dropdown ul.sub_menu li { margin: 0; text-align: left; display: block !important; padding: 0; width: 100%; } /*The anchors within the dropdown sub menu list items*/ div.nav-main ul.dropdown li ul.sub_menu li a { text-decoration: none; display: block; text-align: left; padding: 30px; font-size: 2rem; line-height: 1; font-weight: normal; text-transform: none; height: auto; color: #1B2845; background-color: #fff; } /*the last anchor in each dropdown menu*/ ul.dropdown ul.sub_menu li:last-child a { /* border: none !important;*/ } div.nav-main ul.nav-menu li.banking-nav.nav-item a { background-color: #fff; color: #1B2845; } div.nav-main ul.nav-menu li.banking-nav.nav-item.on a { border-top-left-radius: 20px; } /* login nav-item styling*/ ul.dropdown ul.sub_menu.JQBankingPanel { min-width: 450px; } .nav-main li.nav-item.banking-nav a { color: #eee; } div.nav-main ul.dropdown ul.sub_menu.banking-nav li li { display: inline-block !important; } div.nav-main li.nav-item.banking-nav.on a:hover, div.nav-main ul.nav-menu li.nav-item.banking-nav a:hover, div.nav-main li.nav-item.banking-nav.on a, div.nav-main li.nav-item.banking-nav a.active { color: #fff; } div.nav-main ul.nav-menu li.nav-item.banking-nav div.login_links a { border-radius: 0; padding: 0 10px; font-size: 1rem; display: inline-block; text-transform: uppercase; border-right: 1px solid #fff !important; margin: 0; margin-right: 0 !important; } div.nav-main ul.nav-menu li.nav-item.banking-nav div.login_links a:last-child { border-right: none !important; padding-left: 3px; } div.nav-main ul.nav-menu li.nav-item.banking-nav div.login_links a:hover { background-color: transparent; text-decoration: underline; } div.nav-main ul.dropdown li ul.sub_menu li a.button { font-size: 1.1875rem; font-weight: normal; padding: 10px 22px; margin: 3px; line-height: normal; display: inline-block; } div.nav-main ul.nav-menu li:last-child.nav-item a.button-right, div.nav-main ul.nav-menu li:last-child.nav-item a.button-right:link, div.nav-main ul.nav-menu li:last-child.nav-item a.button-right:visited { border-top-left-radius: 0; border-top-right-radius: 20px; } @media screen and (max-width: 490px) { div.nav-main ul.nav-menu li.nav-item.banking-nav div.login_links a { border-right: none !important; margin: 0 !important; padding: 0 10px !important; } } /* -------------- =.= Top Navigation -------------- */ .topnav { width: 100%; margin: 0; text-align: center; overflow: hidden; } div.nav-top ul.nav-menu { padding: 0; margin: 0 auto; padding: 5px 0; width: 100%; display: inline-block; background-color: #e8eced; } div.nav-top ul.nav-menu li.nav-item { display: inline-block; padding: 0 20px; } /* div.nav-top ul.nav-menu li.nav-item:first-child {padding-left:0;} div.nav-top ul.nav-menu li.nav-item:last-child {padding-right:0;}*/ div.nav-top ul.nav-menu li.nav-item a, div.nav-top ul.nav-menu li.nav-item.nav-routing{ color: #000000; display: inline-block; padding: 0; text-decoration: none; font-size: 0.9rem; } div.nav-top ul.nav-menu li.nav-item a {text-decoration: underline;} div.nav-top ul.nav-menu li.nav-item a:hover, div.nav-top ul.nav-menu li.nav-item a.on { text-decoration: none; } div.nav-top ul.nav-menu li.nav-item a.on {font-weight: bold;} div.nav-top ul.nav-menu li.nav-item.last { border-right: none; } div.nav-top ul.nav-menu li.nav-item a:hover { color: #4E5B73; text-decoration: underline; } div.nav-top ul.nav-menu li.nav-item.nav-routing {color: #A12D4D} /* -------------- =.= Subnavigation Menus -------------- */ /* Sub Nav*/ div.nav-sub { width: auto; } div.subnav { margin: 30px 0 20px 0; padding: 0 10px; } div.nav-sub { margin: 35px 0 20px 0; padding: 0; } div.nav-sub ul.nav-menu li.nav-item { display: block; list-style-position: outside; line-height: normal; margin: 0; } div.nav-sub ul li.nav-item a { display: block; } div.nav-sub ul li.nav-item a:hover { } div.nav-sub ul.nav-menu li a.on, div.subnav ul li a.on { text-decoration: none; font-weight: 700; } div.nav-sub ul li a.on:before {} div.nav-sub h3, div.subnav h3 { padding: 0 0 10px 15px; margin: 0 } div.nav-sub h3 a { text-decoration: none; display: block; } div.nav-sub h3 a:hover { text-decoration: underline; } div.nav-sub ul, div.subnav ul { list-style: none; margin: 0px 10px 20px 16px; padding: 0 } div.nav-sub ul li, div.subnav ul li { padding: 8px 0; margin: 0 } div.nav-sub ul li.level0 {} div.nav-sub ul li.level1 { margin-left: 20px !important; font-size: .9rem; } div.nav-sub ul li.level2 { margin-left: 5px !important; } div.nav-sub ul li.level3 { margin-left: 5px !important; } div.nav-sub ul li.level4 { margin-left: 5px !important; } div.nav-sub ul ul, div.subnav ul ul { margin: inherit } div.nav-sub ul.nav-menu ul li, div.subnav ul ul li { margin: 4px 0 12px } /* Bottom (footer) Nav*/ div.nav-footer { margin: 0 0 5px 0; } div.nav-footer, div.nav-footer ul { margin: 0; padding: 0; display: inline-block; list-style-type: none; list-style-position: inside; } div.nav-footer ul.nav-menu li.nav-item { padding: 10px 5px 0 0; margin: 0; line-height: 1; display: inline-block; } div.nav-footer ul.nav-menu li.nav-item:last-child, div.nav-footer ul.nav-menu li.nav-item.last { border-right: none; padding-right: 0; } div.nav-footer ul.nav-menu li.nav-item a { display: inline-block; } div.header-mobile { display: none; } div.header-mobile div.header-menu { clear: both; display: none; } /* adjustments to allow mobile login rollup - show header and hide all the pieces */ div.header-desktop, div.nav-main { display: block; } @media screen and (max-width: 767px) { /* move nav below decks at mobile size */ .subnav-mobile, .sidebar-mobile { display: block; padding: 10px 20px; width: calc(100% - 40px); } .subnav, .sidebar { display: none; } .subnav-mobile div.nav-sub h3 { margin-top: 10px; } div.sidebar-mobile div.cta, div.sidebar-mobile div.promotion { display: block; text-align: center; } div.sidebar-mobile div.cta, div.sidebar-mobile div.cta a { display: block; } /* shrinking sub-nav at mobile size */ div.nav-sub h3, div.subnav h3 { padding: 0 0 5px 0; margin: 0; font-size: 1rem; } div.nav-sub ul.nav-menu { margin: 0 0 20px 0; } div.nav-sub ul.nav-menu li.nav-item { display: inline-block; margin: 10px 10px 0 0; padding: 0; font-size: .875rem; vertical-align: top; } div.nav-sub ul.nav-menu li.nav-item ul, div.nav-sub ul.nav-menu li.nav-item ul li { display: inline-block; margin: 0 10px 0 0; padding: 0; font-size: .7rem; } div.nav-sub ul li a.on:before { display: none; } } /* -------------- =.= Sticky Menu -------------- */ /* this section must be AFTER all menu and header items */ /* smooth transitions for header itself and logo */ .header-logo img, div.col-header a, div.header-corral { transition: all 0.4s ease; } .header { transition: height 0.4s ease; } /* prevents Firefox header width problem with scaling logo */ .megabox { transition: all 0.3s cubic-bezier(.5,-.5,.5,1.5); } .oblogin, .megabox, .megaclose { transition: top 0.4s ease; } div.wrapper_inner { margin-top: 0; z-index: 1; } .page-body.nav-container { margin: 0 auto; } .header.scrolled { /* removed from mobile */ } /* swapping colors to work on white sticky header */ @media screen and (min-width: 768px) { .header.scrolled { max-width: 100%; position: fixed !important; z-index: 100; top: 0; left: 0; box-shadow: 0px 15px 10px -15px rgba(156, 172, 211, 0.5); background-color: #FFF; background: rgba(255, 255, 255, .95) !important; color: #000 !important; } .header.scrolled div.col-apply a, .header.scrolled button.search-button, .header.scrolled button.locator-button, .header.scrolled button.menu-icon {color: #000000;} .header.scrolled .col-logo a.logo-2025 {display:none;} .header.scrolled .col-logo a.logo-mobile {display:none;} .header.scrolled .col-logo a.logo-sticky {display:block;} .header.scrolled .col-logo a.logo-sticky img {height: 40px;} .header.scrolled div.col-apply a {font-size: 1rem;} } /* adds margin to top of page to account for height of fixed header when scrolled div.wrapper.hasnobanner div.wrapper_inner.scrolled-margin { margin-top: 80px; } */ /* helper for JavaScript, do not remove */ div.mobile-size-indicator { display: none; } @media screen and (max-width: 767px) { /* helper for JavaScript, do not remove */ div.mobile-size-indicator { display: block; position: fixed; bottom: 0; left: 0; width: 1px; height: 1px; } } /* -------------- =.= Alerts & Notifications -------------- */ /* premium floating alerts */ .site-alerts { position: fixed; bottom: 10px; right: 10px; width: 450px; z-index: 3; } /* default alert color is white */ .alert { position: relative; float: right; bottom: 0; right: 0; padding: 0; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); width: 100%; box-sizing: border-box; z-index: 999999; border-radius: 10px; border: 1px solid #DCE4E2; background-color: #fff; color: #000; margin-bottom: 10px; opacity: 0.98; overflow: hidden; } .alert .inner { padding: 5px 10px; } .alert p { margin: 5px auto; line-height: 1.5; color: #000; } .alert a, .alert a:visited { color: #000; } .alert a:hover { text-decoration: none; } .alert-actions { width: 100%; background: rgba(0,0,0,0.1); color: #000; font-size: .9rem; box-sizing: border-box; text-align: right; } .alert-actions a { color: #000; text-decoration: none; text-transform: uppercase; font-weight: 500; margin: 0 0 0 20px; padding: 5px 10px; display: inline-block; } .alert-actions a:hover { color: #000 !important; text-decoration: underline; } /* includes fix for bulleted lists */ .alert-expand { cursor: pointer; } .alert-inner { max-width: 1440px; margin: auto; text-align: center; } .alert-inner ul, .alert-inner ul li ul { text-align: center; margin: 5px auto; list-style-position: inside; padding: 0; } .alert-inner ul li { text-align: center; margin: 5px auto 0 auto; } .alert h5.alert-title, .alert h5.alert-title a { color: #000; font-size: 1rem; margin: 1% 23px 1% 0; /* give space for down arrow on phones */ font-weight: 600; display: block; } .alert h5.alert-title:hover, .alert h5.alert-title a:hover {text-decoration: none; cursor: default;} .alert-desc, .alert p { font-size: .9rem; color: #000; line-height: 1.2; } .alert button { font-size: 1.5rem; background: transparent; border: none; padding: 0; cursor: pointer; color: rgba(0,0,0,0.5); margin: 0; text-decoration: none; max-width: 100%; display: inline-block; line-height: normal; float: right !important; position: absolute; right: 12px; top: 5px; outline: none; } .alert p { margin: 0; padding-bottom: 8px; } .alert-closed-icon, .alert-open-icon { font-family: "Font Awesome 7 Pro"; font-weight: 100; } .alert-closed-icon:before {/* angle down */ content: "\f107"; } .alert-open-icon:before {/* angle up */ content: "\f106"; } button.alert_expandbtn:hover {box-shadow: none; color: #333;} @media screen and (max-width:540px) { .site-alerts { width: auto; max-width: 95%; margin: 0 auto 0 auto; bottom: 10px; } .alert { margin: 5px auto 0 auto; } .alert-actions {font-size: .7rem;} } /* color options */ .alert.alert-white {/* this picks up default white styles */} .alert.alert-cookies {/* this picks up default white styles */} .alert.alert-red { background-color: #A12D4D !important; color: #fff !important; } .alert.alert-red h5, .alert.alert-red h4, .alert.alert-red h3, .alert.alert-red h2 { color: #fff !important; } .alert.alert-red a, .alert.alert-red .alert-desc, .alert.alert-red p, .alert.alert-red fa-exclamation-circle:before { color: #fff !important; } .alert.alert-red .alert-actions {background: rgba(0,0,0,0.1);} .alert.alert-red button { color: rgba(255,255,255,0.5);} .alert.alert-purple { background-color: #EF4636 !important; color: #fff !important; } .alert.alert-purple h5, .alert.alert-purple h4, .alert.alert-purple h3, .alert.alert-purple h2 { color: #fff !important; } .alert.alert-purple a, .alert.alert-purple .alert-desc, .alert.alert-purple p, .alert.alert-purple .fa-exclamation-circle:before { color: #fff !important; } .alert.alert-purple .alert-actions {background: rgba(0,0,0,0.1);} .alert.alert-purple button { color: rgba(255,255,255,0.5);} .alert.alert-yellow { background-color: #FEBE2C !important; color: #000 !important; } .alert.alert-yellow h5, .alert.alert-yellow h4, .alert.alert-yellow h3, .alert.alert-yellow h2 { color: #000 !important; } .alert.alert-yellow a, .alert.alert-yellow .alert-desc, .alert.alert-yellow p, .alert.alert-yellow .fa-exclamation-circle:before { color: #000 !important; } .alert.alert-yellow .alert-actions {background: rgba(255,255,255,0.5);} .alert.alert-yellow button { color: rgba(0,0,0,0.3);} .alert.alert-teal { background-color: #244B5A !important; color: #fff !important; } .alert.alert-teal h5, .alert.alert-teal h4, .alert.alert-teal h3, .alert.alert-teal h2 { color: #fff !important; } .alert.alert-teal a, .alert.alert-teal .alert-desc, .alert.alert-teal p, .alert.alert-teal .fa-exclamation-circle:before { color: #fff !important; } .alert.alert-teal .alert-actions {background: rgba(0,0,0,0.1);} .alert.alert-teal button { color: rgba(255,255,255,0.5);} .alert.alert-blue { background-color: #007D80 !important; color: #fff !important; } .alert.alert-blue h5, .alert.alert-blue h4, .alert.alert-blue h3, .alert.alert-blue h2 { color: #fff !important; } .alert.alert-blue a, .alert.alert-blue .alert-desc, .alert.alert-blue p, .alert.alert-blue .fa-exclamation-circle:before { color: #fff !important; } .alert.alert-blue .alert-actions {background: rgba(0,0,0,0.1);} .alert.alert-blue button { color: rgba(255,255,255,0.5);} /* two new colors 2022 */ .alert.alert-limeade { background-color: #80BC00 !important; color: #fff !important; } .alert.alert-limeade h5, .alert.alert-limeade h4, .alert.alert-limeade h3, .alert.alert-limeade h2 { color: #fff !important; } .alert.alert-limeade a, .alert.alert-limeade .alert-desc, .alert.alert-limeade p { color: #fff !important; } .alert.alert-limeade .alert-actions {background: rgba(0,0,0,0.1);} .alert.alert-limeade button { color: rgba(255,255,255,0.5);} .alert.alert-vermillion { background-color: #FF4713 !important; color: #fff !important; } .alert.alert-vermillion h5, .alert.alert-vermillion h4, .alert.alert-vermillion h3, .alert.alert-vermillion h2 { color: #fff !important; } .alert.alert-vermillion a, .alert.alert-vermillion .alert-desc, .alert.alert-vermillion p{ color: #fff !important; } .alert.alert-vermillion .alert-actions {background: rgba(0,0,0,0.1);} .alert.alert-vermillion button { color: rgba(255,255,255,0.5);} /* premium floating alerts end */ /* cookie warning is just an alert now */ /* -------------- =.= Speedbumps -------------- */ .speedbump_wrapper { text-align: center; } .speedbump_wrapper span.title5 { font-size: 0.9rem; } .speedbump_wrapper span.subtitle1 { font-size: 0.8rem; } /* fix for super-long URLs in speedbump and search results */ div.speedbump_content_box h3, .vsrch-url a { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; /* Non standard for WebKit */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } div.speedbump_content_box h2, div.speedbump_content_box h3, div.speedbump_content_box h5 { margin: 0 0 15px 0; } div.speedbump_content_box h2 {font-size:2rem; color: #007D80;} @media screen and (max-width:900px) { div.speedbump_content_box, div.speedbump_content_box h5 { font-size: 0.8rem; line-height: 1.5; } div.speedbump_content_box h3, div.speedbump_content_box h2 { font-size: 1rem; } div.speedbump_content_box h5 { margin: 5px 0; } } @media screen and (max-width:450px) { div.speedbump_content_box h3 { margin: 0; } div.speedbump_content_box, div.speedbump_content_box h5 { line-height: 1.2; } div.speedbump_content_box h3 { font-size: 0.9rem; } } /* div.ui-widget-content {height: auto !important;}*/ div.speedbump_content_box { padding: 10px 10px 0 10px; } .ui-dialog .ui-dialog-buttonpane { margin: 10px; padding: 0; } .ui-dialog .ui-dialog-buttonpane button { margin: 0 0 0 10px; } .ui-dialog .ui-dialog-titlebar { margin: 10px; border-radius: 10px; display: none; /* removed */ } div#dialog_content { margin: 0 10px 10px 10px; } .ui-widget.ui-widget-content {border: none; border-radius: 10px;} /* -------------- =.= Sitemap -------------- */ div.sitemap-container { padding: 10px 0 40px 0; overflow: hidden; } ul.sitemaplist { margin: 2px 0px 0 0px; padding: 0; font-size: 1rem; list-style-type: none; } ul.sitemaplist li.sitemap_2 { margin: 10px 0px 0 0px; font-family: Montserrat, sans-serif; font-size: 1.2rem; font-weight: 600; } ul.sitemaplist li.sitemap_2 a { margin: 2px 0px 0 2px; padding-left: 0px; display: inline-block; } ul.sitemaplist li.sitemap_3 { margin: -2px 0px 0 10px; } ul.sitemaplist li.sitemap_3 a { margin: 2px 0px 0 10px; padding-left: 5px; margin-bottom: 8px; margin-top: 3px; font-size: 1.1rem; } ul.sitemaplist li.sitemap_4 { margin: 2px 0px 0px 15px; } ul.sitemaplist li.sitemap_4 a { margin: 2px 0px 0 14px; padding-left: 10px; margin-bottom: 8px; margin-top: 3px; font-size: 1rem; } ul.sitemaplist li.sitemap_5 { margin: 2px 0px 0px 20px; } ul.sitemaplist li.sitemap_5 a { margin: 2px 0px 0 16px; padding-left: 15px; margin-bottom: 8px; margin-top: 3px; font-size: 0.9rem; } ul.sitemaplist li.sitemap_6 { margin: 2px 0px 0px 25px; } ul.sitemaplist li.sitemap_6 a { margin: 2px 0px 0 18px; padding-left: 20px; margin-bottom: 8px; margin-top: 3px; font-size: 0.8rem; } ul.sitemaplist li.sitemap_7 { margin: 2px 0px 0px 30px; } ul.sitemaplist li.sitemap_7 a { margin: 2px 0px 0 20px; padding-left: 25px; margin-bottom: 8px; margin-top: 3px; font-size: 0.75rem; } ul.sitemaplist li.sitemap_ { display: none; visibility: hidden; } ul.sitemaplist .sitemap_2 h4 { margin: 2px 0px 0 2px; padding-left: 0px; font-size: 1.3rem; display: inline-block; font-weight: 600; } ul.sitemaplist .sitemap_3 h4 { font-size: 1.2rem; margin-bottom: 0; font-weight: 400; } @media screen and (max-width:640px) { div.sitemap { clear: both; float: none; width: auto; } } /* -------------- =.= FAQ's -------------- */ ul.faq-list { padding: 0 0 30px 15px; list-style-type: none; margin: 0; } ul.faq-list li { padding: 0 0 10px 0; } ul.faq-list li a > span { text-decoration: underline; } ul.faq-list a:hover { text-decoration: none; } ul.faq-list a:hover > span { text-decoration: underline; } ul.faq-list a.faq-question:before { text-decoration: underline; /* part 1 of IE11 text-decoration work-around */ } ul.faq-list a.faq-question:before {/* angle right */ font-family: 'Font Awesome 7 Pro'; font-weight: 900; content: "\f105"; font-size: 1.3rem; width: 20px; padding-right: 10px; margin-left: -15px; text-decoration-color: #fff; display: inline-block; text-decoration: none; /* part 2 of IE11 text-decoration work-around */ line-height: 1; transition: all .1s ease; } ul.faq-list a.faq-open:before { transform: rotate(0.25turn); margin-bottom: -15px; } /*don't format list items within FAQ answers like the faq list items*/ ul.faq-list li ul li { border: none; list-style: disc; } .faq-content { padding: 0 19px 0 0; margin: 0; border: 1px solid transparent; } /*container for FAQ's on search results page...*/ .faq-search { padding: 1em 0; } .faq-search h3 {} div.faq-content a, div.faq-content a:link, div.faq-content a:visited { text-decoration: underline !important; } /* -------------- =.= Responsive Lists -------------- */ .list { clear: both; } .list-row { clear: both; margin: 0; } /*.seminars-list .list-row { margin: 1em 0 0; }*/ .list-row:last-child { border-bottom: none; } .list-row.separator { clear: both; border-bottom: 4px solid #333; } .list-head { clear: both; background-color: #A12D4D !important; } .list-head.list-head-main { display: flex; border-radius: 3px; } .list-head.list-head-repeated { display: none; } .list .list-item { display: inline-block; float: left; padding: 0; } .list .list-item, .list .list-item li, .list .list-item p { line-height: normal; } .list .list-item h5 { font-size: 22px; font-size: 1.375rem; } .list .list-item ul { margin: 0 0 5% 0; padding: 0 0 0 5%; } /* embedded LI's should be left-aligned */ .list .list-item li { text-align: left; } /*font awesome asterisk added to content*/ .list .list-item .asterisk { display: inline; margin: 0 -12px 0 0; } .list .list-item .dot { font-size: 36px; font-size: 2.25rem; color: #EF4636; text-align: center; width: 40px; margin: auto; display: block; } .list .head { padding: 0; color: #ffffff; font-size: 0.875rem; line-height: normal; text-align: center; } .list .head .inner { padding: 10px !important; text-align: center; } .list-item .inner { padding: 0 10px; } .list .title { width: 50%; text-align: center; } .list .date { white-space: nowrap; width: 25%; text-align: center; } .list .time { width: 25%; text-align: center; } .list .location { width: 25%; text-align: center; } .list .location p { margin-top: 0; } .list .cost { width: 10%; text-align: center; } div.list div.list-row { background: #fff; align-items: center; min-height: 50px; border-radius: 3px; display: flex; padding: 10px; } div.list div.list-row:nth-child(odd) { background: #f8f8f8; } div div.list-row .list-item:last-child .inner { border-right: none; } div.list-row .list-item .comp-title{ margin: 0; font-size: 1rem; line-height: normal; font-weight: 600; text-align: left; color: #63656a; } div.list-row .list-item .comp-check { width: 20px; height: 20px; } div.list-row .list-item h5 { margin: 0; } div.list-row .list-item:last-child .inner { border: none !important; } .list.seminars-list { width: 100%; margin: auto; background-color: #fff; border: 1px solid #EF4636; } .list.seminars-list .head { background: transparent !important; font-weight: 600; font-size: 110%; padding: 10px 0; } /*.list.seminars-list .head:after { background: #F9E07F; display: block; content: ''; height: 4px; margin: 8px 0 0; width: 45%; }*/ .pers-toolbox-content .list.seminars-list .head:after { background: #D46C4E; height: 2px; } .pers-toolbox-content .list.seminars-list .date, .pers-toolbox-content .list.seminars-list .location { font-size: 85%; } .pers-toolbox-content .list.seminars-list .head.date, .pers-toolbox-content .list.seminars-list .head.location { font-size: 100%; } .list.seminars-list .list-row { background: transparent !important; min-height: 0; border-bottom: 1px solid #efefef; } .list.seminars-list .title:before {/* users class */ font-family: 'Font Awesome 7 Pro'; font-weight: 900; content: "\f63d"; margin: 0 .5rem 0 0; } .list.seminars-list .title.head:before { content: ''; margin: 0; } .no-seminars { display: none; } .sem-pers-head { display: none; } .pers-toolbox-content .sem-pers-head, .toolbox-section h6 { display: block; margin: 4% 0 1% 0; } div.seminar_description .backbutton { display: none; } div.sem_field div.form-field { line-height: 25px; } div.sem_field div.form-field div.label { font-weight: 600; color: #296A57; } div.sem_field div.form-field { margin: 8px 0; } div.sem_field div.form-field div.input p { margin: 0; } @media screen and (max-width:767px) { .list .head { width: auto; } .list .head .inner { font-size: .7rem !important; } div.account-compare { display: flex; flex-direction: column; } /* .list .list-item.onehalf { width: 98% !important; clear: none; } .list .list-item.onethird { width: 50% !important; clear: none; } .list .list-item.onefourth { width: 33.33333% !important; clear: none; } .list .list-item.onefifth { width: 24% !important; clear: none; } .list .list-item.onesixth { width: 20% !important; text-align: center; clear: none; }*/ .list-head.list-head-main { display: none; } .list-head.list-head-repeated { display: flex; flex-wrap: wrap; } div.list-row .list-item h4 { text-align: center; } div.list-row .list-item.account, div.list-row .list-item.first { width: 100% !important; clear: right; border-right: none; } div div.list-row .list-item.account, div div.list-row .list-item.account .inner, div div.list-row .list-item.first .inner { min-height: 1em !important; margin: 0; border-right: none; } div div.list-row .list-item .inner { min-height: 150px; } .seminars-list div.list-row .list-item .inner { min-height: 0; font-size: 1rem; line-height: 25px; } div .list-item.first-head { display: none; } div .list-item.second-head { } div .list-item.second .inner, div .list-item.third .inner, div .list-item.fourth .inner, div .list-item.fifth .inner, div .list-item.sixth .inner, div .list-item.seventh .inner { padding: 10px 6px !important; padding: 1em 4% !important; } div .list-item.second .inner { padding-left: 1em !important; } .list-item.third, .list-item.third-head, .list-item.fourth, .list-item.fourth-head, .list-item.fifth, .list-item.fifth-head { } } @media screen and (max-width:640px) { .list .title, .list .location, .list .date, .list .time { width: 100%; clear: both; } .list-head { display: none; } .list .list-item, .list .list-item li, .list .list-item p { text-align: left; } .list .list-item { padding: 5px 0; } } @media screen and (max-width:440px) { .list .head { line-height: normal; } } /* -------------- =.= Posts / Post Lists / Post Images -------------- */ /* Featured posts list, regular post list*/ .post-embedded { clear: both; padding: 10px 0; overflow: hidden; } div.post-embedded h3 { margin: 0; } h1.post-title { font-size: 3rem; line-height: 1.1; } ul.post-list div.post-title {font-size: 1.1rem; font-weight: bold; margin: 15px 0;} @media screen and (max-width: 767px) { div.custom-page-title h1.page-title.post-title { font-size: 1rem !important; line-height: 1.15 !important; } } div.meta {font-size: 1rem; margin: 10px 0 0 0;} div.post-content { padding: 1rem 0 2rem; } .post-content p { font-family: inherit !important; font-weight: inherit !important; } ul.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } ul.posts li { width: calc(50% - 50px); padding: 25px; } /*ul.posts li img { float: left; }*/ .post-list .abstract, .post-list .abstract p { font-family: inherit !important; font-weight: inherit !important; } ul.post-list {margin: 0 auto 50px auto; max-width: 1440px;} ul.post-list li { width: 25%; box-sizing: border-box; clear: both; margin: 0 0 0 0; padding: 0 20px; max-height: 600px; position: relative; overflow: hidden; } ul.post-list li .read-more { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; margin: 0; height: 80px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF); border-radius: 8px; font-size: 1rem; padding: 0; } ul.post-list li .read-more a.button {font-size: .875rem; padding: 3px 10px 1px 10px; max-height: 34px; overflow: hidden; width: 250px; text-overflow: ellipsis; white-space: nowrap;} @media screen and (max-width:1050px) { ul.posts {justify-content: center;} ul.post-list li { width: calc(50% - 50px); } } ul.post-list li a h3 { margin: 0; } ul.post-featured li { width: calc(50% - 50px); padding: 25px; box-sizing: border-box; } ul.posts li a { padding: 0; /* overflow: hidden;*/ position: relative; } ul.post-featured li a h3 { margin: 0; } ul.post-featured li a:hover, ul.post-list li a:hover { text-decoration: none; } ul.post-featured .abstract { overflow: hidden; margin: 0; } .intro ul.post-featured .abstract p, ul.post-featured .abstract p { font-family: inherit !important; } div.pagination-status { display: none; padding: 15px 0; margin-bottom: 20px; border-top: 1px dotted #dedede; border-bottom: 1px dotted #dedede; } div.post-pagination {display: flex; justify-content: center; margin-bottom: 50px;} div.post-pagination button {display: inline-block;} /* -------------- =.= POST THUMBS AND CONTAINERS -------------- */ div.post-feature-img { overflow: hidden; max-width: 480px; margin: 0 0 20px 0; padding: 0; overflow: visible; } div.post-feature-img img { /* box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); flattened to match feature de images*/ border-radius: 25px; margin-bottom: 10px; max-width: 100%; border: 5px solid #fefefe; } div.img50 img { position: relative; top: 0; } div.img50 { width: 52px; height: 50px; overflow: hidden; } div.img50 img, img.img50 { min-height: 50px; max-width: 80px; } div.img90, div.img100 { width: 102px; height: 90px; } div.img90 img, div.img100 img { min-height: 100px; max-width: 160px; } div.img-full, div.img50, div.img90, div.img100, .img-full { background-position: 50% 40%; background-repeat: no-repeat; background-size: cover; } /*=============== POST DETAIL IMAGE ================*/ .posts .post-img, .posts .feature-img { /* margin: 5px 3% 20px 0; float: left; */ } div.feature-img img { /* width: 100%; */ } ul.posts div.feature-img { /* width: 40%;*/ } div.post-detail .post-img, div.post-embedded .post-img { max-width: 40%; float: right; margin: 30px 30px 30px 30px; } div.post-list div.post-img, div.post-featured div.post-img { margin-bottom: 10px; } div.post-content div.post-img, div.post-embedded div.post-img { max-width: 40%; } div.post-img img { margin: 0; /* box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); flattened to match feature deck images*/ border-radius: 15px; } div.post-detail div.feature-img {margin-bottom: 10px; max-width: 92%;} ul.posts li a { height: auto; display: block; clear: both; } .posts h2 { font-size: 1.6rem; margin-top: 10px; } .post_body .alignleft { float: left; margin: 0; } ul.post-list .meta {display: none;} @media screen and (max-width:767px) { div.post-detail .post-img, div.post-embedded .post-img { float: none; margin: 0 auto 30px auto; max-width: 96%; } ul.posts li img { float: none; } ul.posts div.feature-img { width: 100%; } ul.posts li img { float: none; } ul.posts li a { overflow: visible; } ul.posts li div.feature-img, div.post-img { float: none; clear: both; } ul.posts li div.feature-img img, div.post-img img, div.post-content div.post-img { } div.post-content h3 { clear: both; } div.post-img, div.feature-img, div.post-embedded div.post-img { width: 98%; max-width: 98%; padding: 0; } ul.post-featured li { width: 100%; float: none; padding: 0; clear: both; } /*ul.posts, ul.post-list {display: block;}*/ ul.post-featured li, ul.post-list li { width: calc(100% - 20px); padding: 10px 10px 20px 10px; border-bottom: 1px solid #f7f7f7; } ul.post-featured li:last-child, ul.post-list li:last-child {border-bottom: none;} div.post-detail div.feature-img {margin-bottom: 30px; max-width: 100%;} ul.post-list li p.read-more {display: none;} } /* featured posts for media center page */ #media-center-featured-press ul.post-featured {display: flex; align-items: center;} #media-center-featured-press ul.post-featured li {width: 50%; flex-direction: row; display: flex; gap: 0 20px; padding: 0; margin: 0; flex-shrink: 0;} #media-center-featured-press div.post-feature-img {flex-shrink: 0; width: 50px; height: 50px; object-fit: contain;} #media-center-featured-press div.post-feature-img img {width: 100%; margin-bottom: 0} #media-center-featured-press ul.post-featured li .abstract {display: none} #media-center-featured-press ul.post-featured li .meta {display: none} #media-center-featured-press .posts h2 {font-size: 1rem; font-weight: normal;} /* -------------- =.= Seminars / Events -------------- */ div.seminar_wrapper {padding-bottom: 50px; overflow: hidden;} /*Individual Seminar / Event Detail Insert*/ .seminar_description { margin: 0 0 40px 0; } .seminar_header { /* border-bottom: solid 1px #eee;*/ } div.seminar_header h2 { float: left; width: 90%; } div.seminar_header div.signup { margin: 30px 0 0 0; } div#jQoutput_signup { float: right; padding-left: 10px; } div.seminar_wrapper .label { font-weight: bold; } div.sem_signup input.field[type=text], div.sem_signup input.field[type=email], div.sem_signup textarea { width: 100%; } div.sem_signup input#formkey_user { width: 30%; vertical-align: top; } .seminar_form_message_area, .seminar_message_area { margin: 10px 0; padding: 10px; border: solid 1px #43978D; border-radius: 3px; font-weight: 600; background-color: #F9E07F; text-align: center; } .seminar_form_message_area:before, .seminar_message_area:before {/* check circle */ content: '\f058'; font-family: 'Font Awesome 7 Pro'; font-weight: 900; display: inline-block; font-size: inherit; margin: 0 7px 0 0; color: #43978D; } .seminar_form_message_area p, .seminar_message_area p { margin: 0; } /*seminars in sidebars*/ div.sidebar div.seminars-list { border: 1px solid #333; text-align: center } div.sidebar div.seminars-list div.list-head { display: none } div.sidebar div.seminars-list div.list-row { padding: 5px } div.sidebar div.seminars-list div.title { display: block; width: auto; font-weight: 700 } div.sidebar div.seminars-list div.date { display: block; width: auto; color: #333; font-size: 14px; font-size: 0.875rem; } div.sidebar div.seminars-list div.time { display: none } div.sidebar div.seminars-list div.location { display: none } div.sidebar div.seminars-list div.cost { display: none } /* -------------- =.= Site Banners -------------- */ .hero-banner { display: block; z-index: 1; position: relative; height: auto; margin: 0 auto; text-align: center; width: 100%; overflow: hidden; max-height: 600px; } .hero-banner .page-inner { display: flex; align-content:center; align-items: center; } .hero-image {position: relative; margin: 0 auto; width: 100%;} .hero-image img { width: 100%; height: 100%; display: block; min-height: 600px; max-height: 600px; object-fit: cover; } .hero-text {text-align: left; color: #fff; margin: auto; position: absolute; top: 25%; max-width: 1440px; width: 100%; padding: 20px; left: 0; left: 50%; top: 50%; transform: translate(-50%, -50%);} .hero-text p span.small {display: block;} .hero-text.txt-light {color: #fff;} .hero-text.txt-dark {color: #000000;} .hero-title { width: calc(70% - 40px); font-size: 3.125rem; font-weight: 700; margin: 0 10px; line-height: 1; font-family: 'Montserrat', sans-serif; } .hero-subtitle { width: calc(35% - 40px); font-size: 1.125rem; font-weight: 600; margin: 20px 10px; line-height: 1.2; font-family: 'Montserrat', sans-serif; } .hero-copy { width: calc(70% - 40px); padding: 0; margin: 10px 10px; line-height: 1.2; } .hero-button { text-align: left; z-index: 2; margin: 20px 10px; position: relative; } /* text alignment option*/ .hero-content-left .hero-text, .hero-content-left .hero-title, .hero-content-left .hero-subtitle, .hero-content-left .hero-copy, .hero-content-left .hero-button { text-align: left;} .hero-content-center .hero-text, .hero-content-center .hero-title, .hero-content-center .hero-subtitle, .hero-content-center .hero-copy, .hero-content-center .hero-button {text-align: center;margin-left: auto; margin-right: auto;} .hero-content-right .hero-text, .hero-content-right .hero-title, .hero-content-right .hero-subtitle, .hero-content-right .hero-copy, .hero-content-right .hero-button {text-align: right; margin-right: 10px; margin-left: auto;} /* adjustments for home page banner with background image .hero-banner-home.hero-content-left .hero-text {width: calc(60% - 20px); } .hero-banner-home.hero-content-right .hero-text {width: calc(45% - 20px); } .hero-banner-home.hero-content-center .hero-text {width: calc(100% - 80px); text-align: center; } */ /* adjustments for interior page banner with background image .hero-banner-int-image.hero-content-left .hero-text {width: calc(75% - 20px); } .hero-banner-int-image.hero-content-right .hero-text {width: calc(65% - 20px); left: 35%} .hero-banner-int-image.hero-content-center .hero-text {width: calc(100% - 80px); text-align: center; }*/ /* banner image alignment */ .hero-image.hero-align-top img {object-position: center top;} .hero-image.hero-align-middle img {object-position: center center;} .hero-image.hero-align-bottom img {object-position: center bottom;} /*banner darkening */ .hero-banner img.darken90 {filter: brightness(10%);} .hero-banner img.darken80 {filter: brightness(20%);} .hero-banner img.darken70 {filter: brightness(30%);} .hero-banner img.darken60 {filter: brightness(40%);} .hero-banner img.darken50 {filter: brightness(50%);} .hero-banner img.darken40 {filter: brightness(60%);} .hero-banner img.darken30 {filter: brightness(70%);} .hero-banner img.darken20 {filter: brightness(80%);} .hero-banner img.darken10 {filter: brightness(90%);} /*@media screen and (max-width: 1200px) { .hero-title {font-size: 2.5rem !important;} .hero-subtitle {font-size: 1.125rem !important;} .hero-text {margin: 40px auto;} }*/ /* mobile-only image option */ img.hero-image-desktop {display: block !important;} img.hero-image-mobile {display: none !important;} @media screen and (max-width: 767px) { img.hero-image-desktop {display: none !important;} img.hero-image-mobile {display: block !important; } .hero-image img { min-height: 400px; max-height: 1000px;} /*.hero-banner {max-height: 100%;} .hero-text {width: auto !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; text-align: center !important; width: 100%; margin: 0 auto; padding: 30px !important; transform: none !important;} .hero-title, .hero-subtitle, .hero-copy, .hero-button a.button {width: auto;} .hero-text.txt-light {background-color: #244B5A;} .hero-text.txt-dark {background-color: #DCE4E2;} .hero-banner {display: flex; flex-direction: column;} .hero-banner .hero-text {margin: 0; position: absolute; top: 0; text-align: left;} .hero-banner .hero-image {margin-top: 0;}*/ .hero-text, .hero-title, .hero-subtitle, .hero-button {width: 100%; /*margin-left: 0;*/} .hero-title {font-size: 2rem !important;} .hero-subtitle {font-size: 1rem !important;} } @media screen and (max-width: 539px) { div.hero-button a.button, div.hero-button a.button:link, div.hero-button a.button:visited {font-size: 1rem;} } /* -------------- =.= Video Banners - need update after flexslider removal -------------- */ div.flexslider ul.slides li div.banner.banner-video div.outer-slide div.banner-inner { padding-bottom: 0; } /* gets rid of bottom gap at mobile size */ .video-background { width: 100%; } .video-background video { width: 100%; } .grayscale1 video { filter: grayscale(100%); } .video-content { position: absolute; top: 30px; color: white; left: 30px; max-width: 50%; max-height: 500px; overflow: auto; } .video-title { font-size: 3.5rem; } .video-subtitle { font-size: 2rem; } .video-copy {} @media screen and (max-width:1300px) { .video-title { font-size: 3rem; } .video-subtitle { font-size: 1.5rem; } } @media screen and (max-width:1200px) { .video-title { font-size: 2.25rem; } .video-subtitle { font-size: 1.5rem; } } @media screen and (max-width:900px) { .video-title { font-size: 3.5rem; } .video-subtitle { font-size: 2rem; } .video-content { position: relative; top: auto; left: auto; max-width: 100%; clear: both; text-align: center; margin: 45px; max-height: 100%; overflow: visible; } } /* -------------- =.= Offset Banners removed -------------- */ /* Drip pan */ div.contentdeck.drip-pan .deckinner{padding: 30px 0;} div.contentdeck.drip-pan .multicol-inner {display: flex; align-items: center;} div.contentdeck.drip-pan .multicol1 {display: block;} div.contentdeck.drip-pan .multicol2{/*display: block;*/ display: flex; flex-wrap: wrap;} div.contentdeck.drip-pan .drip-title, div.contentdeck.drip-pan .drip-title h2{font-size: 3.125rem; font-weight: 400; font-family: 'Montserrat', sans-serif; } div.contentdeck.drip-pan .drip-title p, div.contentdeck.drip-pan .drip-title h3{font-size: 1.625rem; font-weight: 700; font-family: 'Montserrat', sans-serif; line-height: 1.2; margin: 40px 0 10px 0;} div.contentdeck.drip-pan a.button {max-width: 100%;} div.contentdeck.drip-pan .drip-icon-text {margin: 10px 0;} div.contentdeck.drip-pan .drip-item {display: flex; align-items: center; padding: 10px 20px; flex-direction: column; transform: translate3d(0, 0, 0);} div.contentdeck.drip-pan .drip-icon-text a {font-size: 1.25rem; text-decoration: none; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } div.contentdeck.drip-pan .drip-icon-text i {font-size: 3rem; padding: 20px;} div.contentdeck.drip-pan .drip-icon-text strong {font-size: 1.125rem; font-family: 'Montserrat', sans-serif; line-height: 1.5; font-weight: 600; } div.contentdeck.drip-pan .drip-icon-text strong::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #fff; opacity: 0.3; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } div.contentdeck.drip-pan .drip-icon-text a:hover strong::before { transform: scaleX(1);} div.contentdeck.drip-pan.brandcolor .drip-icon-text strong::before { background: #fff; } /* override for Azure Geyser */ div.contentdeck.azure-geyser.drip-pan .drip-icon-text a { color: #244B5A;} div.contentdeck.drip-pan .drip-icon-text strong::before {background: #244B5A; } @media screen and (max-width: 1000px) { div.contentdeck.drip-pan .drip-icon-text.onefourth {width: 50%;} } @media screen and (max-width: 767px) { div.contentdeck.drip-pan .multicol-inner {display: block; text-align: center;} div.contentdeck.drip-pan .drip-item {justify-content: center;} div.contentdeck.drip-pan .drip-icon-text.onefourth {width: 100%;} } /* narrower intro deck option */ div.contentdeck.narrow-deck .deckinner{max-width: 1000px;} /* limited height deck option */ div.contentdeck.deck-height-limit-500 .multicol-inner .onewhole{max-height: 500px; overflow-y: auto;} /* -------------- =.= JQuery Style Overrides & Ajax Elements -------------- */ /* Overlays */ .ui-dialog { max-width: 95% !important; z-index: 1000; } .ui-widget-content { border: none; } .ui-widget { font-family: inherit !important; } .ui-widget-header { border: none; background: #666; color: #ffffff; font-weight: bold; } .ui-widget-overlay { background: #777777; position: fixed; opacity: .60; /*filter: Alpha(Opacity=60); causes SortSite standards error */ } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; opacity: .30; /*filter: Alpha(Opacity=30); causes SortSite standards error */ border-radius: 8px; } /* DIALOG ELEMENTS */ .ui-button-text-only .ui-button-text { padding: 2px 5px; } .ui-dialog .ui-dialog-buttonpane button { font-family: inherit; font-weight: normal; text-decoration: none; } .ui-dialog .ui-dialog-content { text-align: left; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background: #eee; border: none; color: #272727; } div.ui-dialog-titlebar { background: #007D80; } div.ui-dialog-titlebar button { display: none; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-radius: 0; } div.speedbump_content_box h3 { color: #007D80; } .error { color: #e80000 !important; font-weight: bold; } .ui-widget-content a { color: #000; } .ui-button-text-only .ui-button-text { padding: 2px 20px; } @media screen and (max-width: 769px) { div.footer-quicklinks, div.footer div.txt-right { float: none !important; width: 100%; } div.footer .twofifths.right { float: none; } .foot-colright { border-left: none; } .foot-colright .inner, .foot-colleft.inner { padding: 10px 0; } } /* overrides for modals */ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { color: #1d5987 !important; letter-spacing: normal; } .ui-icon-background, .ui-state-active .ui-icon-background { background-color: #1d5987 !important; letter-spacing: normal; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #1d5987 !important; letter-spacing: normal; } .ui-button:active .ui-icon { background-image: url(""); } .ui-dialog .ui-dialog-content { padding: .5em 5px; } /* -------------- Ajax Elements -------------- */ /* progress indicator*/ .ajaxInProgress_wrapper { z-index: 99999; width: 100%; position: fixed; margin: 0; } .ajaxInProgress_wrapper .ajaxInProgess { position: fixed; background-image: url("wait3.gif"); width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; opacity: .75; background-color: #333; } .debug { border: 1px dotted; padding: 5px; background-color: #333; color: #FFFFFF; } /* -------------- =.= Google Search or Voice Search Integration -------------- */ div.google_search_box, div.voice-search-box { max-width: 45%; border: 1px solid #E9E9E9; display: inline; float: left; margin-right: 1%; padding: 2%; } div#resultsTop { padding-right: 20px; margin-right: 20px; /* border-right: 1px dotted #e9e9e9;*/ } div#resultsTop h3 { margin: 44px 0 0 0; border-bottom: 1px solid #e9e9e9; } div.pagination-holder { padding-bottom: 20px; } div.silvercloud_results_wrapper, div.faq-search { position: relative; display: inline-block; } div.faq-search h3 { margin-top: 0; } div.search-results-container {padding: 20px 0; overflow: hidden;} .simple-pagination li {float: none !important;} /* from search html */ .vsrch-item { margin-bottom: 15px; border-bottom: 1px dotted #CACACA; } .vsrch-item a {text-decoration: none !important; } .vsrch-title {font-size: 1.25rem;} .vsrch-excerpt {font-size: 0.85rem; line-height: normal; } .vsrch-unmatched i {font-size: 0.85rem; line-height: normal; text-decoration: line-through;} .vsrch-url a { font-size: 0.925rem; text-decoration: none !important; } .vsrch-number {font-size: 0.75rem; float:right;} @media screen and (max-width: 740px) { div#resultsTop { padding-right: 0; margin-right: 0; border: none; } div.google_search_box, div.voice-search-box { float: none; width: auto; display: block; max-width: 100%; clear: both; } div.silvercloud_results_wrapper, div.faq-search { float: none; width: auto; display: block; max-width: 100%; clear: both; margin-top: 40px; } } /* -------------- =.= Flexible Iframe & Responsive Videos -------------- */ /* 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; } /* Responsive video container - moved out from BITTYPE */ .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 25px; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; transform: scale(1); } /* -------------- =-= Tabbed Content Areas -------------- */ div.ca_tabs { clear: both; float: left; border-bottom: 1px solid #ccc; padding: 0; width: 100%; margin-top: 1em; } div.ca_tabs ul { width: 100%; padding: 0; margin: 0; line-height: normal; } div.ca_tabs ul li { display: inline-block; padding: 0; margin: 0 3px 0 0; float: left; list-style: none; line-height: normal; } div.ca_tabs ul li a { display: block; margin: 0; text-decoration: none; cursor: pointer; font-weight: normal; border-bottom: none !important; color: #fff; padding: 7px 8px 6px; border: solid 1px #296A57; border-bottom-color: #ccc; border-radius: 0; font-size: .8rem; background-color: #296A57 } div.ca_tabs li a:hover { border: solid 1px #616365; background-color: #616365; text-decoration: underline; } div.ca_tabs li.current { margin: 0 3px -2px 0; padding: 0 0 1px } div.ca_tabs li.current a { text-decoration: none; border: solid 1px #ccc; border-bottom: 1px solid #fff !important; background-color: #fff; padding-top: 7px; color: #296A57 } .ca_panel { padding: 15px 0; margin-bottom: 15px; clear: both; } /* -------------- =.= Rate Tables -------------- */ /* -------------- =.= Standardized Rate Table Styles -------------- */ /*-- styles that appear in the rate admin dropdown menu are based on standardized colors and are defined in module config and design.css they are as follows: Centered Centered Bold Left Left Bold Right Right Bold -- */ div.rate-border { border: 1px solid #E8E8E8; border-radius: 8px; overflow: hidden; margin: 20px auto 40px auto; clear: both; max-width: 1280px; width: 100%; background-color: #fff; } .ratetable {width: 100%;} .ratetable tbody {padding: 10px;} .ratetable .txt-left.b, .ratetable .txt-right.b, .ratetable .center.b { font-weight: 700 !important; } .ratetable .center { text-align: center !important; } .ratetable .txt-left { text-align: left !important; } .ratetable .txt-right { text-align: right !important; } .ratetable.tiered { /*affects only tiered layouts*/ } .ratetable td, .ratetable th { padding: 20px; font-size: 1rem; color: #000; text-align: left; line-height: 1.2; } .ratetable tr {border-bottom: 1px solid #e9e9e9;} .ratetable tr:last-child {border-bottom: none;} .ratetable.rateheadline, .ratetable.rateheadline td, .ratetable.rateheadline th { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .ratetable th { text-align: left; } .ratetable th.JQrateAlert { font-size: .675rem; text-align: center; } .ratetable th a { color: #fff; } .ratetable th a sup { margin: 0 3px; } .ratetable td.ratefootnote { border: 0; } .ratetable td.ratefootnote ul{ padding: 0 !important; } .ratetable td.ratefootnote li::before{ display: none; } td.show, th.show { display: table-cell; } td.rate-data:first-child { color: #9f1a2c !important; } /*table headers*/ .rateprogram { font-size: 1.5rem !important; font-weight: 700 !important; color: #244B5A; text-align: left !important; caption-side: top; background-color: #f8f8f8; padding: 30px 20px 15px 20px; margin: 0; } tr.ratehead { border: none !important; background-color: transparent !important; } .ratehead { border: none; background-color: transparent !important; padding: 0 !important; } .ratecolheader a.footnote-link:hover { text-decoration: underline; } .ratedate { width: auto; float: right; font-size: 0.75rem !important; color: #000000; position: relative; bottom: -7px; font-size: 1rem; } .ratedate i {color: #EF4636;} /*column head*/ .ratecolheader, .ratecolheader th { font-weight: 600; font-size: 1rem; color: #FFF !important; line-height: 1; background-color: #244B5A; text-align: left; padding: 10px 20px; } /*tr.ratecolheader-inline th { background-color: #e3f6ea; color: #000; }*/ .tiered-header { background-color: #439fa7 !important; } .tiered-header td { border-left: 1px solid #f2f3f4; font-weight: 300; font-size: 12px; font-size: 0.75rem; color: #fff; text-align: center; } .tiered-header td:first-child { border-left: none !important; } /*.ratetable tr:nth-child(4n-1) { background-color: #f2f3f4; } .ratetable.tiered tr:nth-child(4n-2) { background-color: #f2f3f4; }*/ /*.ratetable tr:nth-child(even) { background-color:#f2f3f4; } */ td.JQrateAlert { text-align: center !important; } #footnotes_row { background-color: transparent !important; } /*rate alert elements within table*/ .rate-alert-icon a:link, .rate-alert-icon a:visited { color: #333; } .rate-alert-icon { width: 50px; } div.JQrateSignup {font-weight: 400;} /*footnotes*/ td.ratefootnote, td.ratefootnote ul li, .footnote p { font-size: 0.75rem; color: #2e2e2e; line-height: normal; } .ratefootnote ul, .ratefootnote ul li { list-style: none; padding: 0; margin: 0; } td.ratefootnote {padding: 20px 20px 10px 20px;} .footnote p { padding: 0 0 1% 0; } div.footnote { padding: 10px; } /*rate tools area*/ div.rate_tools { height: 22px; } ul.rate_tools { list-style: none; float: right; margin: 0; padding: 0; font-weight: normal; color: #4C4C4C; width: 25%; } ul.rate_tools li { display: inline-block; padding: 0; margin: 0; float: left; font-size: 11px; font-size: 0.6875rem; } ul.rate_tools li.saved a div.save-icon { display: inline-block; float: none; padding: 0; height: 9px; } ul.rate_tools li.rates-effective-date { float: right; } ul.rate_tools li div { float: left; } .rate-bold { font-weight: 700; } .rate-left { text-align: left !important; } .rate-center { text-align: center !important; } .rate-right { text-align: right !important; } .ra_message_area { padding: 20px; background: #F4F7FF; border: 1px solid #452892; color: #452892; } @media screen and (max-width: 640px) { ul.rate_tools { float: left; width: 100%; } ul.rate_tools li.rates-effective-date { float: left; } .ratetable td, .ratetable th { font-size: 0.75rem; } } @media screen and (max-width: 450px) { .ratetable td, .ratetable th { font-size: 0.625rem; } } .ratetable tr.footnote-row {border: none;} /* -------------- =.= Comparison Charts (BIT TYPE) -------------- */ /*comparison charts are mostly structured using the "Responsive Lists" css */ div.account-compare { max-width: 1100px; margin: 10px auto; } div.account-compare p, div.account-compare .inner { margin: auto; font-size: 0.95rem; line-height: 1.125rem; text-align: center; } div.account-compare .inner a { } .account-compare h2 { text-align: center; } div.account-compare div.list-row .list-item, div.account-compare div.list-row .list-item .inner { min-height: 0; } div.account-compare div.list-row .list-item .inner { padding: 10px 20px; } .account-compare .fa { font-size: 1.6rem; color: #007D80; } .account-compare .fas { font-size: 1.6rem; color: #007D80; } .account-compare .far { font-size: 1.6rem; color: #007D80; } .account-compare .fal { font-size: 1.6rem; color: #007D80; } .account-compare .fa-check-circle { font-family: 'Font Awesome 7 Pro'; font-weight: 900; color: #007D80; display: block; text-align: center; } .account-compare .fa-times-circle { font-family: 'Font Awesome 7 Pro'; font-weight: 900; color: #007D80; display: block; text-align: center; } /* new comparison chart layout */ div.comp-inline-header {display: none;} div.list-row.comp-first-full .list-item.first .comp-title {color: #007D80; text-align: center;} @media screen and (max-width: 767px) { div.comp-new-layout {margin: 10px;} div.comp-new-layout.list div.list-row {display: block; width: 100%; background-color: #fff;} div.comp-new-layout.list div.list-row div.list-item {display: flex; align-content: center; justify-content: center; border-bottom: 1px dotted #dedede;} div.comp-new-layout.list div.list-row div.list-item div.comp-inline-header {display: flex; width: 50%; padding: 20px; font-size: 1rem;} div.comp-new-layout.list div.list-row div.list-item div.comp-content { width: 50%; padding: 20px;} div.comp-new-layout.list div.list-row .list-item.first {background-color: #EF4636; justify-content: center; border-radius: 5px;} div.comp-new-layout.list div.list-row .list-item .comp-title{color: #FFF;} div.comp-new-layout.list div.list-row.comp-first-full .list-item.first {background-color: #007D80;} } /* new full-width comparison chart row option */ div.list-row.comp-first-full .list-item.first {width: 100% !important;} div.list-row.comp-first-full .list-item.second, div.list-row.comp-first-full .list-item.third, div.list-row.comp-first-full .list-item.fourth, div.list-row.comp-first-full .list-item.fifth, div.list-row.comp-first-full .list-item.sixth {display: none !important;} /* -------------- =.= Bit Randomizer - Staff Listings (BIT TYPE) -------------- */ /* unused */ /* Readmore plugin styles - removed */ /* removing extra margin that allowed for banner to be underneath menu */ @media screen and (max-width: 767px) { div.flexslider, div.wrapper_inner { margin-top: 0; padding-top: 0; } } /* -------------- =.= Level 9 Calculators -------------- */ /* BEGIN: Custom Calculator/Widget Styles */ div.calc-container { text-align: center; padding: 30px; background-color: #fff; margin: 20px auto; background-color: rgba(250,250,250,0.8) !important; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); border-radius: 10px; backdrop-filter: blur(15px); } div.calc-form input { text-align: center; display: inline-block; width: auto; margin: 10px 10px 0 10px; border: solid 2px #DCE4E2; color: #000000; font-weight: 400; border-radius: 10px; } div.calc-icon { color: #EF4636 !important; } div.calc-title { padding: 0; margin: 0; font-size: 1.75rem; color: #EF4636 !important; font-weight: 400; line-height: 1.2; font-family: 'Montserrat', sans-serif; margin-top: 10px; } div.calc-subtitle { padding: 0; margin: 20px auto; font-size: 1.25rem; color: #244B5A !important; max-width: 600px; font-weight: 600; } div.calc-results { display: inline-block; border-radius: 10px; background-color: #ffffff; box-sizing: border-box; width: 46%; padding: 0 0 20px 0; margin: 20px 1%; border: 1px solid #DCE4E2; } div.calc-results-title { padding: 10px 10px; background-color: #244B5A !important; margin: 0 0 10px 0; color: #fff; font-size: 1.275rem; font-weight: 400; border-top-left-radius: 10px; border-top-right-radius: 10px; } div.calc-results-text { margin: 0 15px; } div.calc-results-display { font-size: 1.85rem; color: #244B5A; font-weight: 600; margin-top: 10px; font-family: 'Montserrat', sans-serif; } @media screen and (max-width: 767px) { div.calc-container.auto, div.calc-container.rv { max-width: 97%; } div.calc-container.auto div.calc-results, div.calc-container.rv div.calc-results, div.calc-container.mma-calc div.calc-results { width: 94%; margin: 1% 1.5%; } } div.calc-error { font-size: 1rem; color: #A12D4D; padding: 10px 15px; box-shadow: 5px 0 10px -5px #dedede, -5px 0 10px -5px #dedede; margin: 10px 0; border: 1px solid #cccccc; display: inline-block; } /* plus and minus buttons */ a.calc-button { text-decoration: none !important; background-color: transparent; color: #244B5A; } a.calc-button:hover { color: #00A9BC; } div.post-interaction { margin-bottom: 10px; } div.calc-container .calc-disclaimer { width: auto; } /* input[type=text], input[type=tel], input[type=password], input[type=email], textarea, select {border: solid 1px #4d798f; color: #4d798f;} */ /* .calc-value {font-weight:600;} div.calc-container.mma-calc div.calc-results {width:29%; padding:10px 0; margin:20px 1.5%;} div.mma-calc div.calc-form .calc-title {margin:2% auto 0;}*/ /* END: Custom Calculator/Widget Styles */ /* -------------- =.= Google Maps (BIT TYPE) -------------- */ div.map_container_individual { display: block; float: right } div.individual_map_canvas { display: inline-block; width: 300px; height: 300px; border: 1px solid silver } div.loc_dropdown { margin: 0 0 5px; width: auto; display: block; overflow: hidden } div.loc_dropdown select { float: left; padding: 4px; font-size: 15px; font-size: .9375rem; } div.loc_dropdown input { margin: auto 0 auto 5px; float: left; padding: 4px 8px; font-size: 15px; font-size: .9375rem; } div.map_margin { margin-top: 15px } @media screen and (max-width: 660px) { div.map_container_individual { float: none; margin: 0 auto 20px; width: 300px } .individual_map_canvas, .loc_dropdown { margin: auto } } /* -------------- =.= Commenting and Rating -------------- */ /* COMMENTING STYLES */ div.form-field div.error_message, div.error { font-size: 1rem; } div#comment_all { padding-bottom: 30px; } div.commenting { padding: 0 0 10px 0; margin: 10px 0 0 0; border-top: 1px dotted #999; } div.commenting, #nocomments { display: block; position: relative; } div#commentarea { padding: 10px 20px 10px 13px; } div#comment_button { cursor: pointer; margin: 10px 0; } div.comment { margin: 30px 0 0 0; overflow: hidden; } div.comment h4 { margin-top: 0 !important; } h3.comments-title { margin-bottom: 0 !important; margin-top: 20px; } div.comment.reply { margin: 2% 0 1% 4%; min-width: 50%; } div#comment_form h3 { margin-top: 0; } @media screen and (max-width:480px) { div.comment, div.comment.reply { min-width: 92%; } } div.reply { background-color: #f5f5f5; margin-left: 20px; padding: 1% 2%; border: 1px solid #c1c1c1; border-radius: 3px; } div.reply-thread { border: solid 1px #c1c1c1; border-top: none; border-right: none; height: 150px; width: 14px; position: relative; top: -100px; float: left; left: -41px; display: none; } div.reply div.reply-thread { display: inline-block; } div.reply i.fa-comment, div.comment_moderator i.fa-comment { display: none; } div.reply i.fa-comment-alt, div.comment_moderator i.fa-comment-alt { display: none; } div.comment_moderator .JQflagComment { display: none; } div.comment_author { font-size: .6rem; display: inline; clear: both; line-height: 1; } div.comment_date { font-size: .6rem; display: inline; margin-left: 10px; } div.comment-thanks { clear: both; border: solid 1px #eee; padding: 0.4em; background-color: #fff; } div.comment_icon { float: left; display: inline-block; width: 20px; } div.comment_title { float: left; display: inline-block; margin: 1px 0 5px 4px; } div.comment_title i { font-style: normal; } div.comments { clear: both; margin-left: 1.3em; } div.comments p { margin-top: 0; } form#replyform { overflow: hidden; } div.comment-form, div.reply-form { border: 1px solid #c1c1c1; padding: 10px 15px 0 15px; margin-top: 10px; margin-bottom: 15px; border-radius: 6px; background-color: #f5f5f5; overflow: hidden; } div#comment_form input.comment_submit, a.comment_submit { float: right; font-weight: normal; padding: 6px 12px; border-radius: 5px; background-color: #922209; cursor: pointer; color: #ffffff; margin: 5px 0; box-shadow: none; border: none; } div#comment_form input.comment_submit:hover { box-shadow: 1px 1px 2px #ccc; } div#comment_form input[type=text], div#comment_form input[type=email], div#comment_form textarea, div#reply_form input[type=text], div#reply_form input[type=email], div#reply_form textarea { border-radius: 3px; border: solid 1px #ccc; padding: .5em 2%; width: 95%; } div#comment_form input[type=text]:focus, div#comment_form input[type=email]:focus { box-shadow: 1px 1px 2px #ccc; } div.comment-intro { border: solid 1px #ccc; border-radius: 4px; background: #ededed; padding: 9px; font-size: 90%; } div.social_login a { display: block; float: left; padding: 4px 4px 4px 24px; margin: 6px; background-repeat: no-repeat; background-position: left; border: solid 1px #940029; border-radius: 3px; background-color: #b55c4f; color: #fff; } div.social_login a:hover { text-decoration: none; background-color: #2e516b; border: solid 1px #2e516b; box-shadow: 1px 1px 2px #ccc; } div.social_login a.google { background-image: url(""); } div.social_login a.twitter { background-image: url(""); } div.social_login a.facebook { background-image: url(""); } div.rule { border-bottom: inset 1px #ccc; margin: 0 0 10px; } div.submit { min-height: 0; text-align: right; } .form-group div.submit { margin: auto; text-align: center; border-top: 1px solid #ccc; padding: 20px; width: 90%; } .comment-key { float: right; width: auto; } .comment-key h5 { margin: 0 1em 0 0; float: left; font-size: 0.8rem; } .comment-key h5 i.comments-summit { background-size: 11px 11px; width: 11px !important; height: 11px !important; } h3.comments-title { font-size: 19px; font-size: 1.2rem; } #nocomments { margin: 0.7em 0; } input#formkey_user { margin-bottom: 4px; margin-top: 10px; font-size: 1rem; min-width: 110px; font-weight: normal; } @media screen and (max-width: 769px) { .comment-key { float: left; clear: left; margin: 0 0 1em; } } a.comment-button { display: block; padding: 2px 6px; width: auto; margin: 4px 2px 0 0; background-color: transparent; font-weight: normal; cursor: pointer; line-height: normal; font-size: .7rem; text-transform: uppercase; border: none; float: right; } a.comment-button:hover, a.comment-button:active { color: #fff; background-color: #333; text-decoration: none; } div.ratings { display: block; overflow: hidden; } div.rating_box { float: right; font-size: 11px; font-size: .7rem; padding: 0 10px 5px 0; line-height: normal; } .rating-phrase { font-style: italic; } .rating_average, .rating_stars { float: left; display: inline-block; } .rating_stars { margin: 0 0 0 8px; } .rating-stars img:hover { cursor: pointer; } /* Rating Star Widgets Style */ .rating-stars ul { list-style-type: none; padding: 0; -moz-user-select: none; -webkit-user-select: none; } .rating-stars ul > li.star { display: inline-block; } .rating-stars ul > li.starLabel { display: inline-block; } /* Idle State of the stars */ .rating-stars ul > li.star > i.far { font-size: 1.5em; /* Change the size of the stars */ color: #ccc; /* Color on idle state */ } /* Hover state of the stars */ .rating-stars ul > li.star.hover > i.far { color: #FFCC36; } /* Selected state of the stars */ .rating-stars ul > li.star.selected > i.far { color: #FF912C; } /* -------------- =.= EXTRA "Page Tools" -------------- */ ul.page_tools { list-style: none; float: none; margin: 0; padding: 0; font-size: 0.8em; color: #666; width: 100%; } ul.page_tools li { list-style: none; display: inline-block; font-size: .85em; line-height: normal; padding: 2px; margin: 0; float: left; text-transform: uppercase; } ul.page_tools { margin: 0 0 1em 0; } /* moved ratings-related CSS to comments.css */ ul.page_tools li.tweet { float: right; } /* -------------- =.= Surveys and Polls -------------- */ /* surveys and polls */ div#L9pollForm_div { display: block; clear: both; border: 1px dashed #dedede; margin: 15px 0; padding: 15px; } div#L9pollForm_div .aid:empty { display: none; } div#L9pollForm_div .errormsg { text-align: center; color: #444; } div#L9pollForm_div .form-field { padding: 0; margin: 0; } div#L9pollForm_div .label { font-size: 1.25rem; line-height: 1; display: inline-block; width: 100%; text-align: center; margin-bottom: 10px; } div#L9pollForm_div .input { width: 100%; padding: 0; margin: 0; text-align: center; } ul.poll_qa, ul.poll_qa li, ul.poll_qa li ul, ul.poll_qa li ul li { list-style: none; margin: 0; padding: 0; overflow: hidden; text-align: center; } ul.poll_qa li ul li { display: inline-block; margin: 0 10px 10px 0; } div#L9pollForm_div div.form-field div.submit { border: none; margin: 0 auto; padding: 0; } div#L9pollForm_div div.form-field .button.submit { float: none; width: 150px; } div.sidebar ul.poll_qa li { display: block; text-align: center; margin: 0 0 10px 0; } div.sidebar div#L9pollForm_div { margin: 10px 0; } div.sidebar div#L9pollForm_div .label { margin: 0; } /* radio buttons to real buttons */ div#L9pollForm_div input[type="radio"] { opacity: 0; position: fixed; width: 0; } div#L9pollForm_div .input label { margin: 0; display: inline-block; background-color: #eee; padding: 5px 10px; font-size: 1rem; border: 1px solid #ddd; opacity: .9; transition: all .3s ease; } div#L9pollForm_div .input input[type="radio"]:checked + label { background-color: #fff; border-color: #ccc; opacity: 1; } div#L9pollForm_div .input input[type="radio"]:focus + label { border: 1px dashed #999; } div#L9pollForm_div .input label:hover { background-color: #fff; cursor: pointer; } .poll_results_title { line-height: 1.2; } .poll_results_title .results-question { font-size: 1.25rem; line-height: 1; /* match to label style above */ } /* -------------- =.= Personalized / Location Based Content -------------- */ /* location popup */ div.JQLocation { text-align: center; } div.JQLocation h3 { margin: 35px auto 15px auto; width: 100%; font-size: 1.5rem; } div.JQLocation div.form-field { float: none; text-align: center; } div.JQLocation div.input { float: none !important; width: auto; margin: auto; } div.JQLocation div.input input { text-align: center; } /* -------------- =.= Custom CSS Additions -------------- */ /* infinite-scrolling carousel. CSS-only, no JavaScript - removed - grab from default site if needed*/ /* marketing interstitial - uses modal with bank-intercept class*/ .ui-dialog.bank-intercept { border-radius: 0; padding-bottom: 0; } .ui-dialog.bank-intercept .bank-intercept-opt-out-container { padding: 0; overflow: hidden; min-height: 25px; display: inline-block; } .ui-dialog.bank-intercept .bank-intercept-opt-out { margin: 0 0 0 0; display: inline-block; float: left; font-size: .8rem; color: #ccc; } .ui-dialog.bank-intercept .bank-intercept-opt-out input[type="checkbox"] { margin: 0 2px 4px 8px; color: #ccc; } .ui-dialog.bank-intercept .ui-dialog-buttonpane { background-color: transparent; margin: 3px 0 0 0; padding: 0; display: inline-block; position: absolute; top: 5px; right: 18px; z-index: 10; } .ui-dialog.bank-intercept .ui-dialog-buttonpane button { font-size: 1rem; font-weight: normal; padding: 5px 15px; cursor: pointer; margin: 0; text-decoration: none; transition: opacity .3s ease; max-width: 100%; display: inline-block; font-family: inherit; line-height: normal; background-color: #C0D6DF; color: #fff; border-radius: 0px; } .ui-dialog.bank-intercept .ui-dialog-buttonpane button:hover { background-color: #333; color: #fff; } .ui-dialog.bank-intercept .ui-dialog-buttonpane button:active { background-color: #333; } .ui-dialog.bank-intercept .ui-dialog-buttonpane .ui-button-text-only .ui-button-text { padding: 0 3px 0 0; color: #fff; } .ui-dialog.bank-intercept .ui-dialog-buttonpane button:after {/* arrow right */ content: " \f061 "; font-family: 'Font Awesome 7 Pro'; font-size: 1.1rem; color: #fff; } @media screen and (max-width: 550px) { .ui-dialog.bank-intercept .ui-dialog-buttonpane { position: relative; clear: both; margin: auto; display: block; top: auto; right: auto; text-align: center; padding: 10px 0 0 0; } .ui-dialog.bank-intercept .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog.bank-intercept .ui-dialog-content { padding-top: 0; } .ui-dialog.bank-intercept .bank-intercept-opt-out-container { text-align: center; display: block; min-height: 10px; padding: 0; } .ui-dialog.bank-intercept .bank-intercept-opt-out { display: block; float: none; font-size: .7rem; margin: 10px 0 5px 0; } } /* moving STYLE block out of Google Maps BITTYPE */ .Flexible-container { clear: both; position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; border: 1px solid #c0c0c0; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #map_canvas label { width: auto; display: inline; } #map_canvas img { max-width: none; } div.iw { min-width: 150px; } /* MOBILE NAVIGATION - NEW ACCORDIAN - from site.css */ @media screen and (max-width: 767px) { /* .header.scrolled {position: relative !important;} otherwise mobile menu can't be scrolled - moved stickyheader to a min-width instead */ div.header-mobile { display: block; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;} div.header-mobile div.header-menu { background-color: #DCE4E2; } div.topnav-mobile div.nav-top ul.nav-menu { box-sizing: border-box;} div.nav-main-mobile { border-right: 2px solid #eee; } div.nav-main-mobile ul.top-nav-menu { border-top: 2px solid #d8dee3; } div.header-mobile div.header-menu { clear: both; display: none; } div.header-mobile div.header-menu ul { margin: 0; padding: 0; } div.nav-sub-mobile ul li.nav-item a.parent {border-bottom : 1px solid #ededed;font-weight: bold;} div.nav-sub-mobile ul li.nav-item a.on.parent { text-decoration : none; } div.nav-sub-mobile ul li.nav-item a.on.parent:hover { text-decoration : underline; } div.nav-main-mobile, div.nav-sub-mobile {padding: 0;} div.nav-main-mobile .main-nav-menu { margin: 0; } div.nav-main-mobile ul li, div.nav-sub-mobile ul li { padding: 0; font-size: 1em; } div.nav-main-mobile ul li a, div.nav-sub-mobile ul li a { display: block; padding: 10px 0 10px 10px; margin: 0 -1px 0 0; color: #000000 !important; } div.nav-main-mobile ul.nav-menu li.nav-item, div.nav-sub-mobile ul.nav-menu li.nav-item { display: block; } div.nav-main-mobile ul.nav-menu li.nav-item a, div.nav-sub-mobile ul.nav-menu li.nav-item a { padding: 6px 0; font-size: 1em; text-decoration: none; } div.nav-main-mobile ul.nav-menu li.nav-item a.on:after { float: right; font-family: 'FontAwesome'; content: "\f0d9"; font-size: 1.125rem; } div.nav-sub-mobile ul li a.on { text-decoration: underline; } div.nav-main-mobile ul.top-nav-menu a { font-size: 0.8em !important; padding: 5px 0 5px 10px; } .mobile-menu .nav-link { color: #000000 !important; font-size: 1rem; font-weight: 400; text-decoration: none; border-bottom: 2px solid #EDEDED; } .mobile-menu .navbar-expand-xl .navbar-nav .dropdown-menu { position: static; } .mobile-menu .navbar-toggler:focus { outline: 0; } .mobile-menu .navbar-toggler { padding: 0 20px 0 0; border: 0; } .mobile-menu .dropdown-menu { position: relative; top: 100%; left: 0; z-index: 1000; float: left; width: 100%; padding: 0 20px; margin: 0; font-size: 1rem; color: #DCE4E2; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 0px solid rgba(0, 0, 0, .15); border-radius: 0; max-height: 0; overflow: hidden; display: block; transition: all 0.5s; box-sizing: border-box; } .mobile-menu .dropdown-menu.show { max-height: 1200px !important; transition: all 0.5s; } .mobile-menu .dropdown-menu.show:last-child { padding-bottom: 25px !important; } .mobile-menu .dropdown-toggle { padding: 16px 20px; } /* .dropdown.show{ background-color: #452892; } */ .dropdown.show .dropdown-toggle { color: #244B5A !important; } .mobile-menu .dropdown-item { font-size: 1rem; font-weight: 400; padding: .25rem 0; margin: 5px 0; text-decoration: none; } .mobile-menu .nav-level-2 { font-size: 1rem; font-weight: 700; border-bottom: 2px solid #EDEDED; margin-top: 16px; margin-bottom: 4px; font-family: 'Montserrat', sans-serif; color: #244B5A; } .mobile-menu .nav-level-3 { font-size: .9rem; padding: 0; } .mobile-menu .nav-level-4 { font-size: .8rem; padding: 0 0 0 10px; margin-top: 2px; } .mobile-menu .nav-level-5 { font-size: .7rem; font-weight: 300; padding: 0 0 0 10px; } .mobile-menu .dropdown-item.active, .mobile-menu .dropdown-item:active { color: #000; background-color: #fff; } .mobile-menu .dropdown-toggle::after { border: 0 !important; color: #244B5A; } .mobile-menu .dropdown-toggle { background: url("mobnav-down-arrow-dark.svg"); background-repeat: no-repeat; background-position: right 10px center; } .mobile-menu .dropdown.show .dropdown-toggle { background-image: url(""); background-repeat: no-repeat; background-position: right 10px center; background-color: #FFF; } .mobile-menu .navbar-toggler-icon { background-image: url(""); width: 20px; height: 16px; } .mobile-menu .close { background-image: url("") !important; width: 20px !important; height: 16px !important; background-size: cover; opacity: 1; } } @media screen and (max-width: 500px) { .dropdown-item {white-space: normal;} } /* MOBILE NAVIGATION - NEW ACCORDIAN - END */ div.topnav-mobile div.nav-top ul.nav-menu {padding: 10px 5px; border-top: none; background-color: #e8eced;} div.topnav-mobile ul.top-nav-menu {display: flex;flex-wrap: wrap; align-items: center; justify-content: center;} div.topnav-mobile div.nav-top ul.nav-menu li.nav-item {padding: 0 10px;} body.monsido-toolbar-body-container > .mon-logo-container {z-index: 1 !important; padding: 0 !important;} /* move behind menu */ body.monsido-toolbar-body-container>.mon-logo-container p {font-size: .6rem !important; margin: 0 0 0 10px !important;} body.monsido-toolbar-body-container>.mon-logo-container {font-size: .7rem !important;} @media screen and (max-width: 767px) { div.column-clearing-block {display: none;} } /* power reviews */ .p-w-r .pr-snippet-stars-reco-inline { width: auto; margin: 0 auto 40px auto; margin-top: -30px;} .p-w-r .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-reco {display: none;} .p-w-r .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars {float: none; text-align: center;} .p-w-r .pr-snippet-rating-decimal {border: none; font-weight: 400; margin-left: 20px;} .p-w-r .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal { font-size: 1rem; color: #426471;} .p-w-r .pr-read-review,.p-w-r .pr-review-display { } .p-w-r .pr-read-review, .p-w-r .pr-review-display, .p-w-r .pr-read-review .pr-rd-main-header, .p-w-r .pr-review-display .pr-rd-main-header {background-color: transparent;} .pr-rd-main-header,.p-w-r .pr-read-review .pr-rd-review-headline, .p-w-r .pr-review-display .pr-rd-review-headline {color: #426471 !important;} .p-w-r .pr-read-review span, .p-w-r .pr-read-review time, .p-w-r .pr-review-display span, .p-w-r .pr-review-display time {color: #426471 !important;} .p-w-r .pr-read-review a, .p-w-r .pr-review-display a, .p-w-r .pr-read-review .pr-rd-pagination .pr-rd-pagination-btn, .p-w-r .pr-review-display .pr-rd-pagination .pr-rd-pagination-btn {color: #EF4636;} .p-w-r .pr-read-review p, .p-w-r .pr-review-display p {color: #000000;} .p-w-r .pr-accordion .pr-accordion-btn:active, .p-w-r .pr-accordion .pr-accordion-btn:focus, .p-w-r .pr-accordion .pr-accordion-btn:hover {box-shadow: none !important; border: none; color: #426471;} .p-w-r .pr-read-review.pr-rd-display-desktop .pr-rd-main-footer, .p-w-r .pr-read-review.pr-rd-display-tablet .pr-rd-main-footer, .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-footer, .p-w-r .pr-review-display.pr-rd-display-tablet .pr-rd-main-footer {border-bottom: none;} .p-w-r .pr-read-review .pr-snippet-rating-decimal, .p-w-r .pr-review-display .pr-snippet-rating-decimal {background-color: #f7f9f9; border: none;} .pr-badging-icon circle { fill: rgb(245, 206, 62) !important; cx: 9.5; cy: 9.5; r: 9.5;} .p-w-r .pr-review-display .pr-rd-side-content-block {background-color: #f7f9f9; top: -44px !important;} /* typo fix */ .p-w-r .pr-review-display .pr-rd-description .pr-rd-side-content-block { padding: 15px 10px 5px 10px !important} .p-w-r .pr-read-review p, .p-w-r .pr-review-display p {line-height: 1.6;} .p-w-r .pr-read-review.pr-rd-display-desktop .pr-rd-main-header, .p-w-r .pr-read-review.pr-rd-display-tablet .pr-rd-main-header, .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header, .p-w-r .pr-review-display.pr-rd-display-tablet .pr-rd-main-header {margin-bottom: 0;} .p-w-r .pr-read-review .pr-rd-sort, .p-w-r .pr-review-display .pr-rd-sort {border: 1px solid #DCE4E2 !important; background: #fff !important; min-width: 200px !important; border-radius: 5px; color: #000000;} .pr-review {background-color: #fff; border-radius: 10px; padding: 20px 20px 0 20px !important;} .p-w-r .pr-read-review .pr-rd-footer, .p-w-r .pr-review-display .pr-rd-footer {padding: 0;} .pr-rd-bottomline, .pr-rd-helpful-action {display: none !important;} .pr-snapshot-body { display: none } .pr-snippet-read-and-write a.pr-snippet-write-review-link {display: none;} .p-w-r .pr-review-display .pr-rd-inner-content-block {display: none !important;} .p-w-r .pr-review-display .pr-rd-helpful-action {display: none !important;} /*stars*/ .p-w-r .pr-star-v4-100-filled { background-image: url("") !important;} .p-w-r .pr-star-v4-75-filled { background-image: url("") !important;} .p-w-r .pr-star-v4-50-filled { background-image: url("") !important;} .p-w-r .pr-star-v4-25-filled { background-image: url("") !important;} .p-w-r .pr-star-v4-0-filled { background-image: url("") !important;} /* write a review page */ .p-w-r .pr-accessible-btn { font-size: 1.375rem; font-weight: 400; padding: 9px 30px 11px 30px !important; cursor: pointer; margin: 5px 0; text-decoration: none; transition-delay: 0s; transition-duration: 0.15s; transition-property: all; transition-timing-function: cubic-bezier(0.49, 0.99, 0.54, 0.98); max-width: 100%; display: inline-block; font-family: Montserrat, sans-serif; border-radius: 25px; background-color: #007D80; color: #fff !important; border: 2px solid #007D80; } .p-w-r .pr-accessible-btn:hover { cursor: pointer; background-color: #007D80; color: #fff !important; border: 2px solid #007D80; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); opacity: 0.9; } .p-w-r .pr-accessible-btn:active, .p-w-r .pr-accessible-btn:focus { background-color: #007D80; color: #fff !important; border: 2px solid #007D80; box-shadow: none; } .p-w-r .pr-star-accessible-0-filled, .p-w-r .pr-star-accessible-25-filled, .p-w-r .pr-star-accessible-50-filled, .p-w-r .pr-star-accessible-75-filled, .p-w-r .pr-star-accessible-100-filled, .p-w-r .pr-star-v4, .p-w-r .pr-star-v4-0-filled, .p-w-r .pr-star-v4-25-filled, .p-w-r .pr-star-v4-50-filled, .p-w-r .pr-star-v4-75-filled, .p-w-r .pr-star-v4-100-filled { width: 22px; height: 22px; } /* power reviews END */ .deck-title {margin-bottom: 0; padding-left: 20px !important; padding-right: 20px !important;} .two-column-text-image .deck-title {padding-left: 0 !important; padding-right: 0 !important;} @media screen and (max-width: 768px) { .p-w-r .pr-read-review .pr-rd-content-block, .p-w-r .pr-review-display .pr-rd-content-block { margin-bottom: 15px; position: relative; } } /* help bar */ /* the bar itself and option link - surrounds open container, too*/ .hp-help-bar-container { width: 80%; z-index: 1; position: relative; box-sizing: border-box; text-align: left; margin-top: -80px; left: 48%; transform: translate(-48%, 0); } .hp-help-bar { width: auto; display: flex; align-items: center; justify-content: space-between; padding: 35px 30px; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); background-color: #fff; border-radius: 5px; margin:0 10px; background: #fff url("") no-repeat; background-size: contain; background-position: top left; } .hp-help-title {color: #244B5A; font-weight: 400; font-size: 1.5rem; font-family: 'Montserrat', sans-serif; line-height: 1.2;} .hp-help-title b {font-weight: 700; } .hp-help-subtitle {color: #244B5A; font-size: 0.875rem;} .hp-help-bar-button { position: relative; display: flex; width:auto; margin-left: 25px; cursor: pointer; font-size: 1.25rem; justify-content: space-between; padding: 3px 0 5px 10px; white-space: nowrap; } .hp-help-bar-button button {color:#fff !important;} .hp-help-bar-button button:hover {color:#fff !important;} .hp-help-bar-button button:active, .hp-help-bar-button button:focus {outline: #fff;} .hp-dropdown { width: 100%; text-align: right; } /* container that's shown with links */ .help-bar-modal-container{ background-color: #fff; background: #fff url("") no-repeat; background-position: top left; background-color: rgba(250,250,250,0.9) !important; backdrop-filter: blur(15px); background-size: contain;} .help-bar-content-container{ border-radius: 10px; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px; border: none !important;} .help-bar-content-container .hp-help-text {text-align: center; margin-bottom: 15px;} .help-bar-popup-content { color: #244B5A;} .help-bar-content-container div.pers-optout {margin: 20px auto 10px auto; text-align: center;} .help-bar-content-container .hp-help-title { font-size: 1.2rem;} .help-bar-content-container .hp-help-subtitle {font-size: 2rem; margin-bottom: 30px;} .help-bar-links {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; max-width: 1150px; margin: auto;} .help-bar-popup-content{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .help-bar-popup-a, .help-bar-popup-d {display: block; width: 50%; box-sizing: border-box;} .help-bar-icon-block { box-sizing: border-box; width: 20%; align-items: center; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;} .help-bar-icon-block-link { width: 100%;} .help-bar-icon-block-link a { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; padding: 20px 10px;} .help-bar-icon-block-link:hover { background-color: #00A9BC; border-radius: 10px;} .help-bar-icon-block-link:hover a, .help-bar-icon-block:hover span { color: #fff !important;} .help-bar-icon {font-size: 1.5rem;} .help-bar-icon-block a {text-decoration: none; font-weight: 400; display: flex; color: #244B5A !important; text-align: center;} button.help-bar-close {background-color: #fff; color: #808080; border-radius: 50%; border: 1px solid #dedede; position: absolute; top: -20px; right: -20px; width: 38px; height: 38px; font-size: 1.5rem; font-weight: 100; opacity: 1; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); z-index: 2;} button.help-bar-close:hover { color: #000;} button.help-bar-close:active,button.help-bar-close:focus { outline: none;} /* refresh 2022 */ .refresh-2022 .hp-help-title {font-weight: 700;} .refresh-2022 .help-bar-content-container .hp-help-title { font-size: 1rem;} .refresh-2022 .help-bar-content-container .hp-help-subtitle {font-size: 2.125rem; font-weight: 700;} .refresh-2022 .help-bar-links .row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: center; padding: 10px; width: 100%;} .refresh-2022 .hp-help-text {text-align: center;} .refresh-2022 .help-bar-popup-content {/*justify-content: center;*/ color: #244B5A; margin-top: 20px; flex-wrap: nowrap; align-items: normal;} .refresh-2022 .help-bar-popup-i, .refresh-2022 .help-bar-popup-a, .refresh-2022 .help-bar-popup-d {width: 30%; padding: 30px 10px 20px 10px; background: #fff; margin: 10px; border-radius: 6px; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%);} .refresh-2022 div.help-bar-popup-outro {width: 100%; text-align: center; margin-top: 30px;} .refresh-2022 .help-bar-icon-block { min-width: 16%; width: auto; display: inline-flex; background: #fff; min-width: 100px; flex: 1 0 16%; margin: 10px 0; border-radius: 4px; min-height: 180px; max-width: 180px;} .refresh-2022 .help-bar-icon-block:hover { background-color: #00A9BC;} .refresh-2022 .help-bar-icon-block:hover a, .refresh-2022 .help-bar-icon-block:hover span { color: #fff !important;} .refresh-2022 .help-bar-icon {font-size: 2.5rem;} .refresh-2022 a.help-bar-close {float: right; margin: 5px 10px 15px 10px; transition: all 0.4s cubic-bezier(0.49,0.99,0.54,0.98); line-height: 1; opacity: .7; color: #244B5A; font-size: 3rem; font-weight: 100; z-index: 2;} .refresh-2022 a.help-bar-close:hover { opacity: 1; } .refresh-2022 a.help-bar-close:active,a.help-bar-close:focus { outline: none;} /* icons when they're in the personalized banners */ .hero-section div.second-row .help-bar-icon-block {background: transparent; min-height: 0; max-width: 100%; margin: 0;} .hero-section div.second-row .help-bar-icon-block a { color: #fff !important; border-bottom: 4px solid transparent; font-size: 1.25rem; padding: 0 20px;} .hero-section div.second-row .help-bar-icon-block a:hover {border-bottom: 4px solid #fff;} .hero-section div.second-row .help-bar-links {display: inline-flex;} .hero-section div.second-row .help-bar-links .row {margin: 0 auto;} .hero-section div.second-row div.pers-more-resources {margin: 20px auto 0 auto;} .hero-section div.second-row div.pers-more-options {margin: 0 auto;} .hero-section div.second-row .help-bar-icon-block-link:hover {background-color: transparent;} @media screen and (max-width: 970px) { .refresh-2022 .help-bar-popup-i, .refresh-2022 .help-bar-popup-a, .refresh-2022 .help-bar-popup-d {width: 100%; text-align: center;} .refresh-2022 .help-bar-popup-content {flex-wrap: wrap;} } @media screen and (max-width: 768px) { .hp-help-bar-container {width: 95%;} .hp-help-bar {flex-direction: column; white-space: normal; justify-content: center;} .hp-faux-select-box {margin: 10px auto 0 auto; max-width: 100%; min-width: 300px; width: 98%;} .hp-help-bar-container { margin-top: -110px; margin-bottom: -50px; max-width: 100%; text-align: center;} .help-bar-icon-block {width: 33%;} .hp-help-bar-button {margin: 20px auto; padding: 0;} .help-bar-popup-a, .help-bar-popup-d {width: 100%; text-align: center;} .refresh-2022 .help-bar-icon-block {width: auto; min-width: 33%; flex: 1 0 33%; max-width: 100%;} } @media screen and (max-width: 540px) { .help-bar-icon-block {width: 50%; padding: 5px; font-size: 1rem;} .refresh-2022 .help-bar-icon-block {min-width: 50%; flex: 1 0 50%;} button.help-bar-close { top: -25px; right: -5px;} .help-bar-link {font-size: .9rem;} .help-bar-icon-block a {padding: 5px;} .hero-section div.second-row .help-bar-icon-block a { padding: 0 5px;} } @media screen and (max-width: 370px) { .help-bar-icon-block {padding: 0;} .hp-help-title {font-size: 1.2rem;} button.help-bar-close { top: -8px; right: 0; width: 28px; height: 28px; font-size: 1rem;} .help-bar-content-container .hp-help-text {margin-bottom: 5px;} } /* news and updates homepgage block */ div.news-and-updates {} h2.news-title {margin: 15px auto 25px auto; max-width: 1440px; text-align: center; color: #244B5A;} div.news-container {display: flex; flex-wrap: wrap;box-sizing: border-box; margin: 10px auto 0 auto; max-width: 1410px; justify-content: space-around;} div.news-block {width: 46%; display: flex; align-items: center; margin: 0 2% 40px 2%; background-color: #fff; border-radius: 10px; box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.2); background-size: 120px; min-width: 420px; box-sizing: border-box;} div.news-image { margin: 10px;} div.news-image img { object-fit: cover; width: 200px; border-radius: 10px;} div.news-content {padding: 20px; width: calc(100% - 220px); font-size: 1rem; line-height: 1.2;} div.news-block-title {color: #244B5A; font-size: 1.375rem; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.1;margin-bottom: 5px; } div.news-block a {color: #3367D6;} @media screen and (max-width: 950px) { div.news-block {width: 86%; margin-bottom: 30px;} } @media screen and (max-width: 767px) { div.news-block {width: 96%;} } /* vertical carousels */ .vertical_slider_wrapper{ padding: 50px 0; position: relative; } /*.vertical_slider .slick-track{ display: flex; flex-direction: column; }*/ .vertical_slider_wrapper .slick-slide{ padding: 50px 0; height: auto; } .vertical_slide{ position: relative; display: flex; width: calc(100% - 10px); max-width: 1440px; align-items: center; justify-content: center; /*min-height: 500px;*/ } /*.vertical_slider .slick-slide{ height: 100% !important; }*/ .vertical_slider_content_wrapper{ /* position: absolute; top: 50%; transform: translateY(-50%); right: 40%;*/ width: 46%; margin-right: -10%; margin-left: 10px; box-sizing: border-box; padding: 70px 30px 70px 70px; border-radius: 10px; z-index: 2; background-color: rgba(255,255,255,0.8); box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); backdrop-filter: blur(15px); } .vertical_slide_title{ color: #244B5A; font-weight: 700; font-size: 2rem; line-height: 1; } .vertical_slide_content{ font-size: 1rem; color: #000000; box-sizing: border-box; } .vertical_slide_image_wrapper{ min-height: 400px; width: 60%; z-index: 1; box-sizing: border-box; display: flex; justify-content: flex-end; } .vertical_slide_image_wrapper img{ width: auto; object-fit: cover; margin: 0; border-radius: 10px; } .vertical_slide_content ul{ padding-left: 15px; list-style: none; } .vertical_slide_content ul li{ margin: 5px 0; padding-left: 20px; position: relative; } .vertical_slider .slick-dots{ display: flex; transform: rotate(90deg) translateY(-50%); left: -20px; width: auto; bottom: unset; top: 50%; } .vertical_slider .slick-dots button:hover{ box-shadow: none !important; } .vertical_slider .slick-dots li {margin: 10px 10px 10px 0;} .vertical_slider .slick-dots li button:before{ top: 0; left: 0; width: 8px; height: 8px; content: ''; border-radius: 5px; text-align: center; opacity: .25; transition: all 200ms linear; background-color: #EF4636; line-height: 1; } .vertical_slider .slick-dots li.slick-active button:before{ opacity: 1; width: 25px; } .vertical_slider a.button {padding:2px 30px 4px 30px; font-size: 1rem;} @media only screen and (max-width: 900px) { .vertical_slider .slick-track {display: block; height: 100%;} .vertical_slide{ padding: 0; display: flex; flex-direction: column-reverse; } .vertical_slider_content_wrapper{ width: 85%; padding: 35px 15px 15px 15px; margin: -40px auto 20px auto; min-width: 400px; max-width: 100%; } .vertical_slide_image_wrapper{ position: relative; transform: none; width: 95%; margin: 50px 0 0 0; } .vertical_slider .slick-dots{ display: block; top: unset; bottom: -50px; transform: translateX(-50%); right: unset; left: 50%; margin-bottom: 0; } } @media only screen and (max-width: 400px) { .vertical_slide_title {font-size: 1.2rem;} .vertical_slider_content_wrapper{ min-width: 200px; } } /* drip pan seminars */ div.contentdeck.drip-pan .list.seminars-list { background-color: transparent !important; border: none; display: flex; align-items: center; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } div.contentdeck.drip-pan .list.seminars-list .list-head {display: none;} div.contentdeck.drip-pan .list.seminars-list .title:before {display: block; font-size: 3rem; padding: 20px; font-weight: 400;} /* icon */ div.contentdeck.drip-pan .list-row { width: 25%; flex-direction: column; border-bottom: none; padding: 0; position: relative;} div.contentdeck.drip-pan .list .title, div.contentdeck.drip-pan .list .date, div.contentdeck.drip-pan .list .location {width: 100% !important; padding: 5px 10px; box-sizing: border-box;} div.contentdeck.drip-pan .list .date {font-size: .9rem;} div.contentdeck.drip-pan .list-item .title {padding: 10px 20px;} div.contentdeck.drip-pan .list-item.title a {font-weight:700; text-decoration: none;} div.contentdeck.drip-pan .list-item.title a:hover {font-weight:700; text-decoration: underline;} /* hover */ div.contentdeck.drip-pan .list.seminars-list .list-item a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #fff; opacity: 0.3; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } div.contentdeck.drip-pan .list.seminars-list .list-item:hover a::before { transform: scaleX(1); } @media screen and (max-width: 1000px) { div.contentdeck.drip-pan .list-row { width: 50%;} } @media screen and (max-width:767px) { div.contentdeck.drip-pan .list-row { width: 100%; flex-direction: column; border-bottom: none; padding: 0; position: relative;} } @media screen and (max-width: 640px) { div.contentdeck.drip-pan .list .list-item, div.contentdeck.drip-pan .list .list-item li, div.contentdeck.drip-pan .list .list-item p { text-align: center; } } /* hiding certain seminar element when in a drip-pan deck */ div.contentdeck.drip-pan .no-records {display: none;} div.contentdeck.drip-pan .list.seminars-list div.list-item.date {display: none;} div.contentdeck.drip-pan .list.seminars-list .title:before {display: none;} /* HOMEPAGE CAROUSELS - TESTIMONIALS and MEET THE TEAM */ body { margin: 0; } .team-section { max-width: 1150px; width: 80%; margin: 70px auto; clear: both; text-align: center; box-sizing: border-box; } .team-section h2 { font-size: 50px; font-weight: 700; color: #244B5A; margin: 0 auto 30px auto; font-family: 'Montserrat', sans-serif; } .team-section h3 { font-size: 17px; font-weight: 600; color: #244B5A; font-family: 'Montserrat', sans-serif; margin-top: 35px; } .team-section .img-box { position: relative; } .team-section .img-box img { width: 100%; border-radius: 15px; } .team-section .slick-slide { margin: 0 20px; } .team-section .years { background-color: #fff; padding: 8px 20px; border-radius: 5px; box-shadow: 0px 0px 14px -8px #000000; width: max-content; position: absolute; bottom: -10px; left: 0; right: 0; margin: auto; font-size: 1rem; font-weight: 400; color: #000000; font-family: Montserrat, sans-serif; } .team-section .slick-prev:before { content: url(""); } .team-section .slick-next:before { content: url(""); } .team-section button.slick-prev, .team-section button.slick-next { top: 40%; height: auto; width: auto; opacity: 1; box-shadow: none; } .team-section a.button { margin: 40px auto auto auto; } /* fix for when script doesn't load */ .team-slider {display: flex;} .team-section .img-box {padding: 1px;} .team-section .img-box img {max-width: 230px;} /* fix for when there aren't enough slides to make a carousel */ .team-slider .slick-list {width: 100%;} @media screen and (max-width: 767px) { .team-slider {flex-wrap: wrap; justify-content: center;} .team-section .img-box img {max-width: 260px;} } .testimonials-section { background-color: #B2BEDC; width: 100%; clear: both; margin: auto; padding: 50px 15px; box-sizing: border-box; } .testimonials-section .inner { max-width: 950px; width: 100%; margin: auto; clear: both; box-sizing: border-box; } .testimonials-section .text-box { background-color: #fff; padding: 20px 40px 20px 80px; box-sizing: border-box; width: 100%; border-radius: 10px; box-shadow: 0px 0px 17px 2px rgb(0 0 0 / 6%); color: #007D80; line-height: 30px; font-family: Montserrat, sans-serif; font-size: 1rem; } .testimonials-section .text-box .ttml-title { color: #007D80; font-weight: 700; position: relative; } .testimonials-section .text-box .ttml-title:before { content: url(""); position: absolute; left: -40px; } .testimonials-section .slider-for .slick-slide { margin: 0 20px; } .testimonials-section .slider-nav .slick-slide { margin: 0 25px; } .testimonials-section .slider-nav { margin-top: 40px !important; text-align: center; left: 30px; position: relative; } .testimonials-section .circle-section { position: relative; text-align: center; } .testimonials-section .circle-1 { background-color: #244B5A; } .testimonials-section .circle-2 { background-color: #007D80; } .testimonials-section .circle-3 { background-color: #A12D4D; } .testimonials-section .circle-4 { background-color: #FEBE2C; } .testimonials-section .circle-5 { background-color: #EF4636; } .testimonials-section .slick-current:focus, .testimonials-section .slick-current:active {outline: transparent solid 1px !important; -webkit-tap-highlight-color: transparent;} .testimonials-section .slick-slide {outline: 0 !important; -webkit-tap-highlight-color: transparent;} .testimonials-section .slick-slide:focus, .testimonials-section .slick-slide:active {outline: transparent solid 1px !important; -webkit-tap-highlight-color: transparent;} .testimonials-section .slick-slide:focus .circle:after, .testimonials-section .slick-slide:active .circle:after {outline: transparent solid 1px !important; -webkit-tap-highlight-color: transparent;} .testimonials-section .slick-current:focus .circle:after, .testimonials-section .slick-current:active .circle:after {outline: transparent solid 1px !important; -webkit-tap-highlight-color: transparent;} .testimonials-section h3 { font-size: 1.2rem; font-family: 'Montserrat', sans-serif; font-weight: 600; color: #244B5A; margin: 0; } .testimonials-section p { color: #000000; font-size: .8rem; font-family: Montserrat, sans-serif; margin: 0; } .testimonials-section .copy { text-align: left; top: 8px; opacity: 0; position: relative; transition: all .1s; } .testimonials-section .circle { width: 60px !important; height: 60px; border-radius: 50%; margin: auto auto auto 25px; cursor: pointer; transition: all .5s; } .testimonials-section .slick-current .copy { opacity: 1; top: -49px; right: -60px; position: relative; transition: all .5s; } .testimonials-section .slick-current .circle { margin-left: -15px; position: relative; } .testimonials-section .slick-current .circle:after { content: url(""); margin-top: -55px; position: absolute; left: 75px; } .testimonials-section .slider-for .slick-list { padding-top: 15px; padding-bottom: 15px; } .testimonials-section .slider-nav .slick-list { overflow: visible; } .testimonials-section .slick-dots, .team-section .slick-dots {display: none !important;} @media screen and (min-width: 1024px) { .slider-nav .slick-list{ padding: 0 !important; } .slider-nav .slick-track { transform: none !important; width: 950px; } .testimonials-section .slick-track{ display: flex; } .testimonials-section .slick-slide{ height: inherit; display: flex; flex-direction: column; justify-content: center; } } @media screen and (max-width: 1023px) { .testimonials-section .slider-nav .slick-list { overflow: hidden; padding-top: 50px; } .testimonials-section .slick-current .copy { right: -90px; } .testimonials-section .copy { right: -90px; } .testimonials-section .slick-current .circle { margin-left: 20px; } } @media screen and (max-width: 767px) { .testimonials-section .slick-current .copy { right: -90px; } .testimonials-section .copy { right: -90px; } .testimonials-section .slick-current .circle { margin-left: 0; } .testimonials-section .text-box { padding: 30px 20px 30px 60px; } .testimonials-section .text-box p { font-size: 15px; line-height: 27px; } .testimonials-section .slick-current .copy { right: -70px; } .team-section h2 { font-size: 31px; } .team-section .btn-primary { font-size: 18px; padding: 9px 30px; } .testimonials-section .slider-nav { margin-top: -15px !important; } } /* fix for offset video */ @media screen and (max-width: 767px) { div.contentdeck.offset-horizontal .video-container {min-width: 500px; margin-left: -15px;} } @media screen and (max-width: 550px) { div.contentdeck.offset-horizontal .video-container {min-width: 400px; margin-left: -15px;} } @media screen and (max-width: 380px) { div.contentdeck.offset-horizontal .video-container {min-width: 350px; margin-left: -15px;} } @media screen and (max-width: 300px) { div.contentdeck.offset-horizontal .video-container {min-width: 250px; margin-left: -15px;} } /* news and updates adjustment*/ @media screen and (max-width: 950px) { div.news-block {flex-direction: column; min-width: 0;} div.news-image {margin: 20px;} div.news-image img {width: auto;} div.news-content {width: auto;} } .play-btns { width: 100px; position: absolute; right: -40px; bottom: 31px; z-index: 5; } .play-btns .fa { color:#ccc; cursor: pointer; } .play-btns .fa { color:#ccc } .play-btns .play { display: none; } /* media center inpage link bar */ div.in-page-link-bar {box-sizing: border-box; width: 80%; background: #fff; padding: 0; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); border-radius: 10px; transform: translateY(-50%); text-align: center;} div.in-page-link-bar a {font-size: 1rem; color: #244B5A; text-decoration: none; padding: 26px 0 23px 0; margin: 0 5px; border-bottom: 3px solid #fff;} div.in-page-link-bar a:hover {border-bottom: 3px solid #244B5A;} @media screen and (max-width: 1000px) { div.in-page-link-bar {width: 96%;} } @media screen and (max-width: 767px) { div.in-page-link-bar a {font-size: .8rem;} } @media screen and (max-width: 400px) { div.in-page-link-bar {width: 100%;} div.in-page-link-bar a {font-size: .8rem;} } /* HERO SECTION START */ .hero-section { background: transparent; padding-top: 200px; position: relative; overflow: hidden; } .hero-section > .container {padding-left: 0; padding-right: 0;} .hero-section h2 { font-size: 50px; color: #232525; margin-bottom: 10px; } .hero-section p { font-size: 17px; font-weight: 600; color: #232525; } .hero-section .btn-primary { border-radius: 30px; font-size: 22px; color: #fff; text-decoration: none; text-transform: capitalize; border: 0; padding: 8px 30px; } .hero-section .btn-primary:hover { background-color: #fff !important; color: #333; } .hero-section .btn-primary.red { background-color: #A12D4D; } .hero-section .btn-primary.blue { background-color: #00A9BC; color: #000; } .hero-section .btn-primary.purple { background-color: #EF4636; } .hero-section .second-row { background-color: #244B5A; margin-top: 40px; padding: 30px 0 10px 0; } .hero-section p.big { font-size: 26px; color: #fff; font-weight: 400; text-transform: capitalize; } .hero-section .btn-link.big { font-size: 26px; color: #fff; display: table; text-transform: capitalize; margin:15px auto; } .hero-section .btn-link.small { font-size: 22px; color: #fff; display: table; text-transform: capitalize; margin: auto; } .hero-section p.light { font-size: 40px; color: #456673; font-weight: 500; text-transform: capitalize; margin: 20px 0 0 0; text-shadow:0px 1px 0px #000; } .hero-section .round-img { border-radius: 50%; position: absolute; right: -5%; width: 37vw; height: 37vw; object-fit: cover; top: 14%; } @media screen and (max-width: 1600px) { .hero-section .round-img {width: 46vw; height: 46vw;} } @media screen and (max-width: 1200px) { .hero-section h2 {font-size: 40px;} } @media screen and (max-width: 991px){ .hero-section .round-img {position: static; margin: auto; display: block;} .hero-section {padding-top: 110px;} .hero-section .second-row {background: rgb(36, 75, 90); background: linear-gradient(90deg, rgba(36, 75, 90, 1) 100%, rgba(255, 255, 255, 1) 100%);} .hero-section { text-align: center;} } @media screen and (max-width: 600px){ .hero-section .round-img {width: 300px; height: 300px;} .hero-section .btn-primary {font-size: 20px; padding: 8px 20px;} .hero-section p.big {font-size: 23px;} .hero-section .btn-link.small, .hero-section .btn-link.big {font-size: 20px;} .hero-section p.light {font-size: 31px; line-height: 40px;} } /* additional styles mlj */ .hero-section div.second-row a {color: #fff; font-weight: normal;} .hero-section div.second-row a.tiny {color: #ccc; margin-top: 5px;} .hero-section div.second-row p {color: #fff; font-weight: normal; display: block !important; margin-bottom: 5px;} .hero-section div.second-row p.light {color: #456673;} .hero-section div.second-row i {font-size: 2rem; transform: translateX(-5px);} /* modal-style blank page wrapper */ body.bodyclass_blank_wrapper_modal_style {background-color: #eef7fa; background: url("") no-repeat center center fixed; background-size: cover; height:100%;} div.modal-style-container {display: flex; justify-content: center; position: relative; min-height: 100vh;} div.modal-style-content {width: 100%; max-width: 1150px;} /* body.bodyclass_blank_wrapper_modal_style .wrapper {position: relative;} body.bodyclass_blank_wrapper_modal_style .wrapper_inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 50%); width: 100%; max-width: 1440px; } /* circle page background for banners */ .bodyclass_home-page-wrapper { background-image: url(""); background-repeat: no-repeat; background-position: calc(100% - 260px) -200px; background-size: 110%; } @media screen and (max-width: 990px) { .bodyclass_home-page-wrapper {background-position: calc(100% - 160px) top; background-size: 160%;} } /* header changes - light logo and text for use over dark banner */ body.bodyclass_home-page-wrapper div.col-apply a {color: #000;} body.bodyclass_home-page-wrapper button.search-button, body.bodyclass_home-page-wrapper button.locator-button {color: #000;} body.bodyclass_home-page-wrapper button.menu-icon {color: #000;} body.bodyclass_home-page-wrapper .logo-white {display: none !important;} .logo-black {display: none!important;} /* hides black logo for all but the homepage */ body.bodyclass_home-page-wrapper .logo-black {display: block !important;} body.bodyclass_home-page-wrapper .header.scrolled .logo-black {display: none !important;} /* featured icon linking */ .icon-unlinked {display: block;} .icon-linked {display: none;} .icon-link-on .icon-unlinked {display: none;} .icon-link-on .icon-linked {display: block;} .icon-link-off .icon-unlinked {display: block;} .icon-link-off .icon-linked {display: none;} div.contentdeck.brandcolor.boxed-columns .multicol1 > .inner .rate-feature a, div.contentdeck.brandcolor.boxed-columns .multicol2 > .inner .rate-feature a, div.contentdeck.brandcolor.boxed-columns .multicol3 > .inner .rate-feature a, div.contentdeck.brandcolor.boxed-columns .multicol4 > .inner .rate-feature a, div.contentdeck.brandcolor.boxed-columns .multicol5 > .inner .rate-feature a { color: #244B5A; } .rate-feature a:hover {opacity: .9;} /* adjustments to homepage banner to enhance promo and minimize pers */ .hero-section {overflow-y: visible; overflow-x: clip; position: relative; padding-top: 120px; margin-bottom: 90px;} .hero-section .container.first-row {min-height: 330px;} .hero-section .second-row {padding: 20px 0 20px 0; display: flex;} .hero-section .help-bar-icon-block-link a {display: flex; flex-direction: row; gap: 5px; padding: 0;} .hero-section .help-bar-icon, .hero-section .help-bar-link {display: inline-flex; flex-wrap: nowrap;} .hero-section .help-bar-link {font-size: 1rem;} .hero-section .help-bar-icon {font-size: 1.25rem;} .hero-section div.second-row .help-bar-icon-block a {padding: 0;} .hero-section div.second-row i {transform: translateX(-10px); } /* .hero-section div.second-row a.button {padding: 1px 10px; font-size: 1rem;}*/ .hero-section .pers-counter {color: #fff; margin-right: 10px;} .hero-section .pers-intro {display: flex; justify-content: center; gap: 25px; align-items: center; margin-bottom: 10px;} .hero-section div.pers-blob {display: flex; flex-direction: row; gap: 20px;} .hero-section div.pers-blob .help-bar-links {display: flex;} .hero-section .pers-outro {display: flex; justify-content: center; gap: 10px; align-items: center;} .hero-section div.second-row div.pers-more-options {margin: 0;} .hero-section .lower-tagline { margin: 0;} .hero-section div.second-row div.pers-more-resources {font-size: 1rem; margin-top: 10px} .hero-section p.light {margin-top: 0;} .hero-section p {font-size: 1.75rem; line-height: 1.4; font-weight: 400;} .hero-section h2 {line-height: 1.1;} .hero-section .round-img {max-width: 680px; max-height: 680px;} @media screen and (max-width: 1800px){ .hero-section .round-img { width: 46vw; height: 46vw;} } @media screen and (min-width: 1440px) {/* note that this is MIN width instead of max */ .hero-section .round-img {left: 60%;} } @media screen and (max-width: 767px) { .hero-section .pers-intro, .hero-section .pers-outro {flex-direction: column; gap: 0; margin-bottom: 20px;} } /* personalized banking promo */ .online-banking-promo {color: #000000; text-align: center; border: 1px solid #efefef; margin: 10px auto; padding: 10px; max-width: 400px; max-height: calc(100vh - 310px); overflow: auto;} .banking-promo-image {width: 100%; max-height: 180px; margin-bottom: 16px; border-radius: 7px; overflow: hidden;} .banking-promo-image img { object-fit: cover; object-position: 50% 50%; width: 100%; /* match to block width */ height: 180px;} .online-banking-promo .promo-title {color: #244B5A; line-height: 1.1;} .online-banking-promo p {text-align: center;} @media screen and (max-width: 767px) { .online-banking-promo {margin: 10px auto 0 auto; max-width: 100%; max-height: 100%;} } @media screen and (max-width: 320px) { .banking-promo-image {max-height: 130px;} .banking-promo-image img { height: 130px;} } /* infinite CSS-only photo carousel */ :root { --no-of-slides: 1; --slides-in-view: 1; --slide-width: 3600px; --slide-height: 620px; } /**/@keyframes galleryscroll { 0% {transform: translateX(0);} 100% {transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));} } .photo-carousel-wrapper { display: flex; align-items: center; justify-content: flex-start; overflow: hidden; margin: 0 auto; box-sizing: border-box; width: 7500px;/* recalculated based on blocks in bit type */ } .photo-carousel-wrapper .gallery-block {margin: 0;} .photo-carousel { margin: 50px 0 50px 0; background: transparent; overflow: hidden; width: calc(2 * var(--no-of-slides)); } .photo-carousel-slide { animation: galleryscroll 40s linear infinite; /* SET TIMING HERE - keep in mind the slides are repeated twice*/ display: flex; flex-direction: column; flex: 0 0 auto; height: 636px; box-sizing: border-box; } .photo-carousel:hover .photo-carousel-slide {animation-play-state: paused;} /* grid to use as carousel slide */ div.image-gallery {display: flex; flex-wrap: wrap; flex-direction: row;} /* switching to grid */ div.image-gallery-slides-one, div.image-gallery-slides-two { display: flex; text-align: center; position: relative; height: auto; flex-flow: wrap; align-items: center; justify-content: center; width: auto; display: grid; grid-gap: 20px; grid-auto-flow: column; grid-auto-columns: auto; } div.image-gallery-slides-one::after, div.image-gallery-slides-two::after{ content: ""; flex-grow: 999; } .gallery-block { min-height: 300px; max-height: 620px; min-width: 300px; max-width: 620px; /*border: 1px dashed #dedede;*/ display: flex; position: relative; height: auto; border-radius: 10px; } .gallery-block.cb-1x1 {width: 300px; height: 300px; grid-column-end: span 1; grid-row-end: span 1;} .gallery-block.cb-1x2 {width: 300px; height: 620px; grid-column-end: span 1; grid-row-end: span 2;} .gallery-block.cb-2x1 {width: 620px; height: 300px; grid-column-end: span 2; grid-row-end: span 1;} .gallery-block.cb-2x2 {width: 620px; height: 620px; grid-column-end: span 2; grid-row-end: span 2;} .gallery-block.cb-1x1 img {min-width: 300px; min-height: 300px;} .gallery-block.cb-1x2 img {min-width: 300px; min-height: 620px;} .gallery-block.cb-2x1 img {min-width: 620px; min-height: 300px} .gallery-block.cb-2x2 img {min-width: 620px; min-height: 620px;} .gallery-block img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; object-position: top; } .gallery-block:hover{box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%);} /* overlay */ .gallery-block .overlay { position: absolute; width: 90%; background-color: rgba(255,255,255,0.8); box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%); backdrop-filter: blur(15px); left: 50%; bottom: 0; transform: translate(-50%, 5px); transition: all 0.2s 0.1s ease-in-out; color: #000000; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 10px; padding: 10px; } .gallery-block.gallery-color-block .overlay {top: 50%; transform: translate(-50%, -50%); height: 80%; width: 80%;} .gallery-block-pub {font-weight: 700; font-size: 1.375rem; color: #244B5A; font-family: Montserrat,sans-serif;} .gallery-block-title, .gallery-block-title a{ color: #244B5A;} .gallery-block-date {font-style: italic;} .gallery-block.white {background-color: #fff;} .gallery-block.geyser { background-color: #DCE4E2; } .gallery-block.firefly { background-color: #000000; } .gallery-block.blue-dianne { background-color: #244B5A; } .gallery-block.eminence { background-color: #EF4636; } .gallery-block.saffron { background-color: #FEBE2C; } .gallery-block.st-tropaz { background-color: #007D80; } .gallery-block.monarch { background-color: #A12D4D; } .gallery-block.pelorous { background-color: #00A9BC; } .gallery-block.azure-geyser { background-color: #B2BEDC; } /* infinite CSS-only photo carousel - expanded hitbox for title link .overlay {position: relative;}*/ .gallery-block .overlay:hover {/* don't use a card-based hover effect since the link adds it*/ opacity: 0.96;} .gallery-block .overlay .gallery-block-title a::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;} .gallery-block .overlay .gallery-block-title a {cursor: pointer;} .gallery-block .overlay .gallery-block-title a:hover {text-decoration: underline !important;} .gallery-block .overlay .gallery-block-title a:hover::before, .gallery-block .overlay .gallery-block-title a:focus::before {cursor: pointer;} .gallery-block .overlay .gallery-block-title a:focus {outline-width: 1px; outline-color: #dedede;} .gallery-block .overlay .gallery-block-pub a, .gallery-block .overlay .gallery-block-date a {text-decoration: none; position: relative; z-index: 2;/* allows inside links to work by raising them above the box */} .gallery-block .overlay .gallery-block-pub a:hover, .gallery-block .overlay .gallery-block-date a:hover {text-decoration: underline;} .gallery-block .overlay .gallery-block-pub a:focus, .gallery-block .overlay .gallery-block-date a:focus {outline-width: 1px; outline-color: #dedede;} /* 70 year tab addition for the many logo styles */ img.seventy-years-tab {width: 70px; height: auto; margin: 0 0 0 20px;} .header.scrolled .col-logo a.logo-sticky {display: flex; align-items: flex-start;} .header.scrolled .col-logo a.logo-sticky img.seventy-years-tab {height: auto; width: 46px; margin: 0 0 0 10px;} .logo-mobile.logo-black {display: none !important;} body.bodyclass_home-page-wrapper .logo-mobile.logo-black {display: none !important;} @media screen and (max-width: 800px) { img.seventy-years-tab {width: 47px; margin-top: -20px; margin-left: 10px;} } @media screen and (max-width: 767px) { img.seventy-years-tab {margin-top: -10px;} body.bodyclass_home-page-wrapper .header.scrolled .logo-black {display: flex !important;} .header.scrolled .col-logo a.logo-sticky {display: none !important;} .col-logo {transition: none !important;} } @media screen and (max-width: 500px) { .header-icon.header-location {display: none;} img.seventy-years-tab {margin-left: 10px;} } @media screen and (max-width: 425px) { img.seventy-years-tab, .header.scrolled .col-logo a.logo-sticky img.seventy-years-tab {margin-left: 0; width: 40px; margin-top: -15px;} } @media screen and (max-width: 400px) { img.seventy-years-tab, .header.scrolled .col-logo a.logo-sticky img.seventy-years-tab { width: 30px; margin-top: -20px; margin-left: -5px;} } @media screen and (max-width: 374px) { .col-logo a.logo-sticky, .col-logo a.logo-2025 {display: none !important;} .col-logo a.logo-mobile.logo-red {display: block !important;} /*.col-logo a.logo-mobile.logo-white {display: none !important;} body.bodyclass_home-page-wrapper .col-logo a.logo-mobile.logo-white {display: none !important;} body.bodyclass_home-page-wrapper .col-logo a.logo-mobile.logo-red {display: block !important;} body.bodyclass_home-page-wrapper .header.scrolled .logo-white {display: none !important;} body.bodyclass_home-page-wrapper .header.scrolled .logo-black {display: none !important;}*/ div.col-logo {flex-grow: 1;} div.col-logo img.logo-only {height: 46px; margin-left: 10px; margin-top: 5px;} img.seventy-years-tab, .header.scrolled .col-logo a.logo-sticky img.seventy-years-tab {margin-top: -25px;} } /* overrides for chat and alert placement */ .site-alerts {left: 10px;} .alert {margin-bottom: 5px !important;} #salemove .sm-visitor-app {right: 10px !important;} @media screen and (max-width: 767px) { .site-alerts {bottom: 70px;} } /* FLIP CARDS - flip on hover - customize visual styles as needed */ /* NEEDS EQUAL HEIGHT OVERRIDE */ /* equal height cards bit type */ div.equal-height-cards {margin: 20px auto 0 auto; position: relative; padding: 10px 0;} div.equal-height-cards.container {max-width: 1440px;} div.equal-height-cards div:empty {display: none;} div.equal-height-cards div.card-footer {font-size: .8rem;} div.equal-height-cards .align-items-center .card-body {text-align: center;} /* bootstrap overrides - desktop */ @media (min-width: 1400px) { div.equal-height-cards.container, div.equal-height-cards.container-lg, div.equal-height-cards.container-md, div.equal-height-cards.container-sm, div.equal-height-cards.container-xl, div.equal-height-cards.container-xxl { max-width: 1440px; } } /* override for bootstrap 4 sites */ div.equal-height-cards.container *, div.equal-height-cards.container ::after, div.equal-height-cards.container ::before {box-sizing: border-box;} .flip-card-container { display: flex; justify-content: space-around; margin: 0 auto; max-width: 100%; justify-content: center; } .flip-card-container .row { margin-bottom: 20px; max-width: 1440px; justify-content: center; width: 100%; } /* set the width and height to whatever you want. Remove perspective if you don't want the 3D effect */ .flip-card { background-color: transparent; min-height: 340px; min-width: 240px; border: none; perspective: 1000px; /* Remove this if you don't want the 3D effect */ cursor: pointer; justify-content: center; margin-top: 10px; } /* This container is needed to position the front and back side */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1.2s; transform-style: preserve-3d; padding: 0; display: flex; justify-content: center; margin: auto; transform: rotateY(0deg); } /* Do an horizontal flip when you move the mouse over the flip box container */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card:hover .flip-card-inner.flip-card-noflip {transform: rotateY(0deg); opacity: .94;} /* Position the front and back side */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-perspective: 0; /* Safari */ -webkit-backface-visibility: hidden; /* Safari */ -webkit-transform: translate3d(0,0,0); /* Safari */ visibility: visible; /* Safari */ backface-visibility: hidden; overflow-y: auto; } /* Style the front side (fallback if image is missing) */ .flip-card-front { background-color: #DCE4E2; color: #000000; border-radius: 10px; position: relative; } /* Style the back side */ .flip-card-back { background-color: #DCE4E2; color: #000000; transform: rotateY(180deg); border-radius: 10px; padding: 20px 10px; /* display: flex; flex-direction: column; justify-content: center; this is making scrolled text inaccessible for some reason*/ } /* leadership portraits and options - retired task but styles are live */ .flip-card .flip-card-front .circle-portrait { margin: 20px auto 10px auto; position: relative; z-index: 2; background: #007D80; background: linear-gradient(to bottom, transparent 0, transparent 50%, #007D80 50%, #007D80 80%, transparent 80%) } .flip-card .flip-card-front .circle-portrait img {border-radius: 25px; width: 200px; height: 200px; object-fit: cover; border-radius: 25px; border: 5px solid #00A9BC; background-clip: content-box; padding: 10px; max-width: none; margin: auto; z-index: 3; } div.flip-name {font-weight: 700; padding: 10px 10px 5px 10px; font-size: 1.25rem; line-height: 1;} div.flip-title {text-transform: uppercase; padding: 0 10px 5px 15px;} div.flip-content, div.flip-contentb {padding: 10px 15px; font-size: 0.875rem;} .flip-card-front:before, .flip-card-back:before { content: ''; background-image: url(""); background-repeat: no-repeat; background-position: center bottom; position: absolute; width: 100%; bottom: 14px; max-height: 60px; height: 60px; left: 0; } /* Custom flip card COLOR OPTIONS */ .flip-card-container.flip-color-bar-cyan {} /* default color */ /* overrides for half-navy background option */ .flip-card-container.flip-color-half-navy .flip-card .circle-portrait {background: transparent;} .flip-card-container.flip-color-half-navy .flip-card .circle-portrait img {border: 5px solid #9D2235;} .flip-card-container.flip-color-half-navy .flip-card-front {background: linear-gradient(to bottom, transparent 0, transparent 100px, #00A9BC 100px, #00A9BC 100%, transparent 100%); color: #fff !important;} .flip-card-container.flip-color-half-navy .flip-card-front:before { background-image: none;} .flip-card-container.flip-color-half-navy div.flip-name, .flip-card-container.flip-color-half-navy div.flip-title {background-color: #DCE4E2; color: #000000;} /* new full-width image deck - these styles will replace the style block and can go live at any time */ .contentdeck.two-column-text-image.image-full-width .deckinner {max-height: 500px; padding: 0;} .contentdeck.two-column-text-image.image-full-width .deck-distinct .multicol2 {width: 100%;} .contentdeck.two-column-text-image.image-full-width div.feature-img {max-width: 100%;} .contentdeck.two-column-text-image.image-full-width div.feature-img img {width: 100%; object-fit: cover; border-radius: 0;} .contentdeck.two-column-text-image.image-full-width .deck-distinct .multicol1 {position: absolute; left: 20px; max-width: 600px;} .contentdeck.two-column-text-image.image-full-width.photo-align-left .deck-distinct .multicol1 {right: 20px; left: unset;} .contentdeck.two-column-text-image.image-full-width .txt-light, .contentdeck.two-column-text-image.image-full-width .txt-light p {color: #fff !important;} .contentdeck.two-column-text-image.image-full-width .txt-dark, .contentdeck.two-column-text-image.image-full-width .txt-dark p {color: #000000 !important;} @media screen and (max-width: 767px) { .contentdeck.two-column-text-image.image-full-width .deckinner {max-height: 100%; padding: 70px 0 10px 0} .contentdeck.two-column-text-image.image-full-width .deck-distinct .multicol1 {position: relative; left: unset; margin: 10px 20px;} .contentdeck.two-column-text-image.image-full-width.photo-align-left .deck-distinct .multicol1 {position: relative; right: unset;} .contentdeck.two-column-text-image.image-full-width div.feature-img {width: 100%; } } /* new header Glia phone icon */ div.header-icon {margin-left: 0; margin-right: 0;} div.col-menu {margin: 4px 0;} body.bodyclass_home-page-wrapper .header-chat i { color: #000;} .header-chat i {color: #FFF;} .header-chat.header-icon {margin: 2px;} @media screen and (min-width: 768px) { .header.scrolled .header-chat i {color: #000000;} } @media screen and (max-width: 300px) { .header-chat {display: none;} } /* slick-slider hidden-content fix */ .bodyclass_home-page-wrapper .slick-slide[aria-hidden=true] {visibility: hidden;} .bodyclass_home-page-wrapper .slick-slide[aria-hidden=false] {visibility: visible;} /* fix for outline vs border issues */ .col-join a.button:focus, .col-oblogin button:focus {border: 1px solid transparent; outline: transparent solid 2px;} .slick-dots li button:focus {outline: transparent solid 1px;} /* STAFF FEATURES - custom from client */ .staff-features {box-sizing: border-box;} div.contentdeck.staff-features .deckinner.deck-distinct {padding: 20px;} .staff-features .deck-distinct {flex-direction: column;} .staff-pic-and-title {display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-end; justify-content: flex-start;} .staff-pic-and-title.staff-portrait-left {flex-direction: row; justify-content: flex-start;} .staff-pic-and-title.staff-portrait-right {flex-direction: row-reverse; justify-content: space-between;} .staff-name {font-size: 2rem; font-weight: 700} .staff-pic-and-title, .staff-extras {font-size: 1.4rem;} .staff-picture {width: 33%; display: flex;} .staff-picture img {width: 100%; max-width: 100%; height: auto;} .staff-text {width: 33%;} .staff-pic-and-title.staff-text-center .staff-text {text-align: center;} .staff-pic-and-title.staff-text-left .staff-text {text-align: left; width: 66%;} .staff-pic-and-title.staff-portrait-left.staff-text-center .staff-text {margin-right: 33%; text-align: center;} .staff-pic-and-title.staff-portrait-right.staff-text-center .staff-text {margin-left: 33%; text-align: center;} .staff-copy-and-extras {padding: 20px 0;} .staff-extras {display: flex; flex-direction: row; width: 100%; gap: 20px; justify-content: space-evenly;} @media screen and (max-width: 767px) { .staff-pic-and-title {flex-direction: column !important;} .staff-picture, .staff-text {width: 100% !important} .staff-picture img {max-height: 200px; width: auto;} .staff-extras {flex-direction: column;} } /* 90 percent background */ div.contentdeck.staff-features.geyser {background: linear-gradient(to top, #DCE4E2 90%, white 0%); } div.contentdeck.staff-features.firefly { background: linear-gradient(to top, #000000 90%, white 0%); } div.contentdeck.staff-features.blue-dianne { background: linear-gradient(to top, #244B5A 90%, white 0%); } div.contentdeck.staff-features.eminence { background: linear-gradient(to top, #EF4636 90%, white 0%); } div.contentdeck.staff-features.saffron { background: linear-gradient(to top, #FEBE2C 90%, white 0%); } div.contentdeck.staff-features.st-tropaz { background: linear-gradient(to top, #007D80 90%, white 0%); } div.contentdeck.staff-features.monarch { background: linear-gradient(to top, #A12D4D 90%, white 0%); } div.contentdeck.staff-features.pelorous { background: linear-gradient(to top, #00A9BC 90%, white 0%); } div.contentdeck.staff-features.azure-geyser { background: linear-gradient(to top, #B2BEDC 90%, white 0%); } /* 90 percent background with dots - NOW CHEVRONS */ div.contentdeck.dot-pattern.staff-features.geyser {background: url("") repeat center top, linear-gradient(to top, #DCE4E2 90%, white 0%); } /* white pattern before */ div.contentdeck.dot-pattern.staff-features.firefly { background: url("") repeat center top, linear-gradient(to top, #000000 90%, white 0%); } div.contentdeck.dot-pattern.staff-features.blue-dianne { background: url("") repeat center top, linear-gradient(to top, #244B5A 90%, white 0%); } div.contentdeck.dot-pattern.staff-features.eminence { background: url("") repeat center top, linear-gradient(to top, #EF4636 90%, white 0%); } div.contentdeck.dot-pattern.staff-features.saffron { background: url("") repeat center top, linear-gradient(to top, #FEBE2C 90%, white 0%); } /* white pattern before */ div.contentdeck.dot-pattern.staff-features.st-tropaz { background: url("") repeat center top, linear-gradient(to top, #007D80 90%, white 0%); } div.contentdeck.dot-pattern.staff-features.monarch { background: url("") repeat center top, linear-gradient(to top, #A12D4D 90%, white 0%) ; } div.contentdeck.dot-pattern.staff-features.pelorous { background: url("") repeat center top, linear-gradient(to top, #00A9BC 90%, white 0%); } div.contentdeck.dot-pattern.staff-features.azure-geyser { background: url("") repeat center top, linear-gradient(to top, #B2BEDC 90%, white 0%); } /* 20 percent before */ /* new phone icon */ .phone-icon-dark {display: flex;} /* ________________________ home refresh 2024 ________________________ */ /* white header */ .bodyclass_home-page-wrapper {background-image: none;} .bodyclass_home-page-wrapper .wrapper .header{position: relative;} /*.bodyclass_home-page-wrapper .deckinner.no-padding > .multicol-inner{padding-top: 10px !important; padding-bottom: 10px !important;}*/ /* homepage carousel and dots */ .carousel-b2024.slick-dotted.slick-slider {margin: 0; background-color: #FFF;} /* hide until loaded */ .carousel-b2024 {opacity: 0; visibility: hidden; transition: opacity 1s ease; height: 600px; overflow: hidden;} .carousel-b2024.slick-initialized {visibility: visible; opacity: 1; } .bodyclass_home-page-wrapper .carousel-b2024.slick-initialized .slick-slide[aria-hidden=true] {visibility: visible; opacity: 1; } /* dots */ .carousel-b2024 .slick-dots {padding: 10px 0; bottom: unset; position: relative;} .carousel-b2024 .slick-dots li {width: 25px;} .carousel-b2024 .slick-dots li button {width: 25px; height: 8px; transform: translate(0, -5px);} .carousel-b2024 .slick-dots li.slick-active button {width: 25px; border-radius: 0; z-index: 10; transform: translate(-10px, -5px);} .carousel-b2024 .slick-dots li button:before { font-size: 11px; top: 0; left: 8px; width: 8px; height: 8px; content: ''; border-radius: 5px; text-align: center; opacity: .25; transition: all 200ms linear; background-color: #244B5A; line-height: 1;} .carousel-b2024 .slick-dots li.slick-active button:before {color: #672E78 !important; opacity: 1; width: 25px;} /* new banners */ .hero-banner.home-refresh-2024 {max-height: 100%; height: 100%; position: relative; overflow: visible; box-sizing: border-box; min-height: 600px; display: flex; align-items: center; padding: 20px 0;} .hero-banner.home-refresh-2024 .hero-image {height: 100% !important; position: absolute; display: block;} .hero-banner.home-refresh-2024 .hero-image img { object-fit: cover; height: 100%; min-height: 100%; width: 100%; object-position: center center;} .hero-banner.home-refresh-2024 .hero-text { /* default center */ width: 50%; background-color: rgba(255,255,255,0.8); border-radius: 10px; padding: 40px; position: relative !important; margin: 0 auto; max-width: 720px; color: #000; transform: translate(0, 0); left: unset; top: unset; margin: 0 auto 0 auto; } .hero-banner.home-refresh-2024.hero-content-left .hero-text {margin: 0 auto 0 10px;} .hero-banner.home-refresh-2024.hero-content-right .hero-text {margin: 0 10px 0 auto;} @media screen and (min-width: 1440px) { /* LARGE SCREENS - keep text near the middle */ .hero-banner.home-refresh-2024.hero-content-left .hero-text {left: 50%; transform: translate(-740px, 20px); width: 50%;} .hero-banner.home-refresh-2024.hero-content-right .hero-text {right: 50%; transform: translate(740px, 20px); width: 50%;} } .hero-content-right .hero-text, .hero-content-right .hero-title, .hero-content-right .hero-subtitle, .hero-content-right .hero-copy, .hero-content-right .hero-button { text-align: left; } .hero-banner.home-refresh-2024 .hero-title, .hero-banner.home-refresh-2024 .hero-copy {width: auto;} /* solid background, no image */ .carousel-b2024 {height: auto !important;} .hero-banner.hero-solid-background {height: auto; padding: 20px;} .hero-banner.hero-solid-background .hero-text {position: relative; transform: unset; left: unset; right: unset; margin: 20px auto; max-width: 1400px;} .hero-banner.hero-solid-background.hero-content-left .hero-text {left: 0; transform: unset; margin: 20px auto 20px 20px;} /* left */ .hero-banner.hero-solid-background.hero-content-right .hero-text {right: 0; transform: unset; margin: 20px 20px 20px auto;} /* right */ .hero-banner.hero-solid-background .hero-image img {display: none !important;} .hero-banner.hero-solid-background.white {background-color: #fff;} .hero-banner.hero-solid-background.geyser { background-color: #DCE4E2; } .hero-banner.hero-solid-background.firefly { background-color: #000000; } .hero-banner.hero-solid-background.blue-dianne { background-color: #244B5A; } .hero-banner.hero-solid-background.eminence { background-color: #EF4636; } .hero-banner.hero-solid-background.saffron { background-color: #FEBE2C; } .hero-banner.hero-solid-background.st-tropaz { background-color: #007D80; } .hero-banner.hero-solid-background.monarch { background-color: #A12D4D; } .hero-banner.hero-solid-background.pelorous { background-color: #00A9BC; } .hero-banner.hero-solid-background.azure-geyser { background-color: #B2BEDC; } @media screen and (max-width: 900px) { .carousel-b2024 {height: auto !important;} .hero-banner.home-refresh-2024.hero-full-image {max-height: 100%; padding: 0;} .hero-banner.home-refresh-2024.hero-full-image {position: relative; flex-direction: column;} .hero-banner.home-refresh-2024.hero-full-image .hero-image {position: relative; min-height: 300px;} .hero-banner.home-refresh-2024 .hero-text, .hero-banner.home-refresh-2024.hero-content-left .hero-text, .hero-banner.home-refresh-2024.hero-content-right .hero-text {width: auto; left: unset; transform: translate(0, 0); margin: 10px 20px 0 20px; padding-bottom: 10px;} } /* boxbar-2024 */ .boxbar-2024 {display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; width: 100%;} .boxbar-2024-content {display: flex; flex-direction: row; flex: 1; gap: 20px; width: 100%; justify-content: space-between;} .boxbar-2024 .card {width: 30%; border-radius: 10px; box-shadow: 0 0.1rem 0.6rem rgb(0 0 0 / 20%);} .boxbar-2024 .card-body {padding: 10px 20px 0 20px !important;} .boxbar-2024 .card {transition: all 200ms linear;} .boxbar-2024 .card:hover { transform: scale(1.05);} .boxbar-2024 .help-bar-icon-block-link:hover, .boxbar-2024 .refresh-2022 .help-bar-icon-block:hover {background-color: transparent; color: #1F4A5A;} .boxbar-2024 .help-bar-icon-block-link:hover a, .boxbar-2024 .help-bar-icon-block:hover span { color: #1F4A5A !important;} .boxbar-2024 .refresh-2022 .help-bar-icon {font-size: 5rem;} .boxbar-2024 .help-bar-icon-block-link a {padding: 0;} .boxbar-2024 .card-body .rate-feature {margin-top: 10px;} .boxbar-2024 h2 {margin-top: 0; margin-bottom: 10px;} .boxbar-2024 .card-body h3 {margin-top: 10px;} .boxbar-2024 .boxbar-2024-buttons p {margin-bottom: 0;} .boxbar-2024 .boxbar-2024-buttons a.button {margin: 10px 10px 0 10px;} .boxbar-2024 .boxbar-2024-outro {display: flex; gap: 20px;} /*remove triangle bullets based on mockup .boxbar-2024 ul {list-style-type: disc; padding-left: 0;} .boxbar-2024 ul li:before {display: none;} .boxbar-2024 li::marker {color: #2F67D7;} */ @media screen and (max-width: 767px) { .boxbar-2024-content {flex-direction: column; justify-content: center;} .boxbar-2024 .card {width: 90%; margin: auto;} } /* homepage content animations */ @keyframes slideInLeft{ from {transform: translate3d(-200%,0,0); visibility: visible} to {transform:translateZ(0)} } @keyframes animate-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-image-up { from {transform: scale(.8);} to {transform: scale(1);} } @keyframes scale-image-down { from {transform: scale(1.2);} to {transform: scale(1);} } /* I want to... bar */ .boxbar-2024 .boxbar-2024-title { animation-duration: 3s; animation-name: animate-fade; animation-fill-mode: backwards; } .boxbar-2024-content { animation-duration: 3s; animation-name: slideInLeft; animation-delay: 0.35s; animation-fill-mode: backwards; } .boxbar-2024-buttons { animation-duration: 3s; animation-name: animate-fade; animation-delay: 2s; animation-fill-mode: backwards; } /*banner slide animation */ .slick-active .hero-banner.home-refresh-2024 .hero-text { animation-duration: 2s; animation-name: animate-fade; animation-fill-mode: backwards; } .slick-active .hero-banner.home-refresh-2024 .hero-image img { animation-name: scale-image-down; animation-duration: 1.5s; animation-delay: 0s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: backwards; } /* new boxed-column option for multicolumn conventional decks */ .box-column-1-nopad .multicol1 .inner, .box-column-1-nopad .multicol1 .inner p {padding: 0 !important; margin-bottom: 0 !important; overflow: hidden;} .box-column-1-nopad .multicol1 .inner img {width: 100%; object-fit: cover;} .box-column-2-nopad .multicol2 .inner, .box-column-2-nopad .multicol2 .inner p {padding: 0 !important; margin-bottom: 0 !important; overflow: hidden;} .box-column-2-nopad .multicol2 .inner img {width: 100%; object-fit: cover;} .box-column-3-nopad .multicol3 .inner, .box-column-3-nopad .multicol3 .inner p {padding: 0 !important; margin-bottom: 0 !important; overflow: hidden;} .box-column-3-nopad .multicol3 .inner img {width: 100%; object-fit: cover;} .box-column-4-nopad .multicol4 .inner, .box-column-4-nopad .multicol4 .inner p {padding: 0 !important; margin-bottom: 0 !important; overflow: hidden;} .box-column-4-nopad .multicol4 .inner img {width: 100%; object-fit: cover;} .box-column-5-nopad .multicol5 .inner, .box-column-5-nopad .multicol5 .inner p {padding: 0 !important; margin-bottom: 0 !important; overflow: hidden;} .box-column-5-nopad .multicol5 .inner img {width: 100%; object-fit: cover;} /* video banners */ .hero-video { position: relative; background-position: center; background-size: cover; text-align: center; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; } .hero-video .inner { position: absolute; top: calc(50% - 30px); width: 70%; padding: 0 20px; transform: translateY(-50%); text-align: left; z-index: 1; } .hero-video-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; height: 100%; overflow: hidden; } .hero-video-container {pointer-events: inherit;} .embed-container { position: relative; /* padding-bottom: calc(9 / 16 * 100%);*/ height: auto; /*overflow: hidden; top: 50%;*/ max-width: 100%; /*transform: translateY(-50%);*/ min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .embed-container video{ position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); min-height: 600px; object-fit: cover; } @media screen and (max-width: 1440px) { .hero-banner.home-refresh-2024.hero-video-carton .hero-text {min-width: 80% !important;} .hero-banner.home-refresh-2024 .hero-image.hero-video {min-height: 600px; max-height: 600px;} .hero-banner.home-refresh-2024 .hero-image.hero-video .embed-container video {min-height: 600px; max-height: 600px;} } @media screen and (max-width: 900px) { .hero-banner.home-refresh-2024 .hero-image.hero-video {min-height: 500px; max-height: 500px;} .hero-banner.home-refresh-2024 .hero-image.hero-video .embed-container video {min-height: 500px; max-height: 500px;} } @media screen and (max-width: 767px) { .hero-banner.home-refresh-2024 .hero-image.hero-video {min-height: 400px; max-height: 400px;} .hero-banner.home-refresh-2024 .hero-image.hero-video .embed-container video {min-height: 400px; max-height: 400px;} } @media screen and (max-width: 500px) { .hero-banner.home-refresh-2024 .hero-image.hero-video {min-height: 300px; max-height: 300px;} .hero-banner.home-refresh-2024 .hero-image.hero-video .embed-container video {min-height: 300px; max-height: 300px;} } /* June 2025 - WealthTrek support styles from STYLE-helper.css */ /* NEW - Golden Hour button - not integrated into link choices yet - ONLY FOR WEALTHTREK and replaces Saffron instead*/ a.button8, a.button8:link, a.button8:visited, button.button8, div.contentdeck a.button8, div.contentdeck a.button8:link, div.contentdeck a.button8:visited, div.contentdeck button.button8 { background-color: #FeB041; color: #000 !important; font-weight: bold; font-size: 1rem; border: 2px solid #FeB041; } /* NEW - topo pattern */ div.contentdeck.topo-pattern.white { background: #fff url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.geyser { background: #DCE4E2 url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.firefly { background: #000000 url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.blue-dianne { background: #244B5A url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.eminence { background: #EF4636 url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.saffron { background: #FEBE2C url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.st-tropaz { background: #007D80 url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.monarch { background: #A12D4D url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.pelorous { background: #00A9BC url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.azure-geyser { background: #B2BEDC url("") repeat left top; background-size: cover;} div.contentdeck.topo-pattern.blue-grass { background: #00a9bc url("") repeat left top; background-size: 100%;} /* NEW - little video corners */ .contentdeck.wealthtrek-video-deck .video-container {position:relative; overflow: visible;} .contentdeck.wealthtrek-video-deck .video-container:before, .contentdeck.wealthtrek-video-deck .video-container:after { position:absolute; content:' '; width:30px; height: 30px; border-color:#FeB041; border-style:solid; border-width: 10px; } .contentdeck.wealthtrek-video-deck .video-container:before {top:-15px;right:-15px;border-width: 10px 10px 0 0 } .contentdeck.wealthtrek-video-deck .video-container:after {bottom:-15px;left:-15px;border-width: 0 0 10px 10px} .contentdeck.wealthtrek-video-deck {padding: 30px 0 30px 0;} .contentdeck.wealthtrek-video-deck h2 {color: #000;} .contentdeck.wealthtrek-video-deck .medium {color: #000; line-height: 1.3; margin-top: 10px;} .contentdeck.wealthtrek-video-deck {color: #000; line-height: 1.2;} .contentdeck.wealthtrek-video-deck p {margin-bottom: 10px;} .contentdeck.wealthtrek-video-deck .multicol1 {text-wrap: pretty;} .contentdeck.wealthtrek-video-deck .video-container {border-radius: 0;} .contentdeck.pattern-bar-deck.geyser {background-color: #F9FAFB !important;} /* VERY SPECIFIC STYLES FOR WEALTHTREK BOSTON PAGE */ #why-wealthtrek-reasons .onethird .inner {border: 1px solid #00a9bc; border-radius: 0;} #wealthtrek-logo.contentdeck.geyser {background-color: #F9FAFB !important;} #why-wealthtrek-reasons.contentdeck.geyser {background-color: #F9FAFB !important;} /* red bullet list */ #wealthtrek-boston-domore ul {list-style-type: disc;} #wealthtrek-boston-domore ul li:before {content: unset;} #wealthtrek-boston-domore ul li::marker {color: #950609;} #wealthtrek-boston-domore ul>li, #wealthtrek-boston-domore .deckinner ul>li {margin: 15px 5px;} /* global fix for video decks losing video at mobile sitewide */ @media screen and (max-width: 767px) { .featured-video .deck-distinct .multicol1, .featured-video .deck-distinct .multicol2 {width: 98% !important;} } /* 2025 branding project */ h2.deck-title {text-wrap: pretty;} h3.deck-subtitle, .deck-subtitle {margin: 10px 0 20px 0; text-wrap: pretty; font-weight: 600;} /* four block feature */ /* hiding unused elements */ .four-block-square.four-block-image .four-block-text {display: none;} .four-block-square.four-block-image .four-block-pattern {display: none;} .four-block-square.four-block-image .four-block-solid {display: none;} .four-block-square.four-block-text .four-block-image {display: none;} .four-block-square.four-block-text .four-block-pattern {display: none;} .four-block-square.four-block-text .four-block-solid {display: none;} .four-block-square.four-block-solid .four-block-image {display: none;} .four-block-square.four-block-solid .four-block-text {display: none;} .four-block-square.four-block-solid .four-block-pattern {display: none;} .four-block-square.four-block-pattern .four-block-image {display: none;} .four-block-square.four-block-pattern .four-block-text {display: none;} .four-block-square.four-block-pattern .four-block-solid {display: none;} .four-block-layout {box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;} .four-block-square {flex: 1 1 calc(50% - 20px); overflow: hidden; min-height: 250px; box-shadow: 0px 8px 10px 3px rgba(0, 0, 0, 0.1);} .four-block-image { min-height: 250px; max-width: 310px; width: 100%; display: flex; box-sizing: border-box;} .four-block-image img {object-position: center center; object-fit: cover; height: 100%; width: 100%; } .four-block-text {width: 100%; max-width: 310px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding:5px; box-sizing: border-box;} .four-block-solid {height: 100%; width: 100%; min-height: 250px; max-width: 310px; box-sizing: border-box;} .four-block-pattern {height: 100%; width: 100%; min-height: 250px; max-width: 310px; box-sizing: border-box;} @media screen and (max-width: 1440px) { .four-block-layout {margin: 0 10px;} } @media screen and (max-width: 500px) { .four-block-square {flex: 1 1 auto;} .four-block-image, .four-block-text, .four-block-solid, .four-block-pattern {max-width: unset;} } /* text colors */ .color-white {color: #FFF !important;} .color-black {color: #000 !important;} .color-dark-slate-gray {color: #244B5A !important;} .color-green {color: #007D80 !important;} .color-blue {color: #00A9BC !important;} .color-red-orange {color: #EF4636 !important;} .color-monarch {color: #A12D4D !important;} .color-golden-hour {color: #FEBE2C !important;} .color-gray {color: #DCE4E2 !important;} .color-light-purple {color: #B2BEDC!important;} /* solid background colors */ .bg-color-transparent {background-color: transparent !important;} .bg-color-white {background-color: #FFF !important;} .bg-color-black {background-color: #000 !important;} .bg-color-dark-slate-gray {background-color: #244B5A !important;} .bg-color-green {background-color: #007D80 !important;} .bg-color-blue {background-color: #00A9BC !important;} .bg-color-red-orange {background-color: #EF4636 !important;} .bg-color-monarch {background-color: #A12D4D !important;} .bg-color-golden-hour {background-color: #FEBE2C !important;} .bg-color-gray {background-color: #DCE4E2 !important;} .bg-color-light-purple {background-color: #B2BEDC!important;} /* border colors */ .border-color-white, .border-white {border: 2px solid #FFF !important;} .border-color-black {border: 2px solid #000 !important;} .border-color-dark-slate-gray {border: 2px solid #244B5A !important;} .border-color-green {border: 2px solid #007D80 !important;} .border-color-blue {border: 2px solid #00A9BC !important;} .border-color-red-orange {border: 2px solid #EF4636 !important;} .border-color-monarch {border: 2px solid #A12D4D !important;} .border-color-golden-hour {border: 2px solid #FEBE2C !important;} .border-color-gray {border: 2px solid 2px solid #DCE4E2 !important;} .border-color-light-purple {border: 2px solid #B2BEDC!important;} .border-none {border: none !important;} /* patterns for decks - not for banners */ .pattern-chevrons-multicolor {background: url("") repeat-x top left / auto 110%;} .pattern-chevrons-monarch {background: url("") repeat top left / auto 110%;} /* 2025 Rebrand banners */ .hero-rebrand-2025 {display: flex; gap: 30px; max-width: 1440px; margin: 40px auto; position: relative; align-items: center; justify-content: space-between;} .hero-rebrand-2025.hero-content-right {flex-direction: row;} .hero-rebrand-2025.hero-content-left {flex-direction: row-reverse;} .hero-rebrand-2025 .hero-content {display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; padding: 80px 40px;} /* .hero-rebrand-2025.hero-int-and-home a.button {interior banner size increase requested font-size: 1.35rem; padding: 3px 8px 3px 10px; } */ .hero-2025-title {font-size: 3.625rem; line-height: 1.1; font-weight: 700; text-wrap: pretty;} .hero-2025-subtitle {font-size: 2rem; line-height: 1.1; margin: 15px 0; text-wrap: pretty; font-weight: 600;} .hero-rebrand-2025 .hero-image {max-width: 650px; z-index: 2; position: relative; min-width: 400px; display: flex; justify-content: center; margin: 0 40px;} .hero-rebrand-2025 .hero-image img {max-height: 700px;} /* homepage background box with chevrons */ .hero-rebrand-2025.hero-overlap {max-width: 1440px; margin-bottom: 30px;} .hero-rebrand-2025.hero-overlap .hero-content::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content::before {/* default */ content: ''; position: absolute; top: 0; left: 0; width: 173%; height: 100%; z-index: -1; background-repeat: no-repeat, no-repeat; } .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content::before { left: -73%; top: 0; height: 100%; width: 173%; background-repeat: no-repeat, no-repeat; } .hero-rebrand-2025.hero-overlap .hero-content::before, .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content::before{/* Monarch */ background-image: url(""),linear-gradient(to top, #A12D4D 0, #A12D4D 100%); } .hero-rebrand-2025.hero-overlap .hero-content.banner-chevrons-black::before, .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content.banner-chevrons-black::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content.banner-chevrons-black::before{/* Black */ background-image: url(""),linear-gradient(to top, #000000 0, #000000 100%); } .hero-rebrand-2025.hero-overlap .hero-content.banner-chevrons-dark-slate-gray::before, .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content.banner-chevrons-dark-slate-gray::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content.banner-chevrons-dark-slate-gray::before{/* Dark Slate Gray */ background-image: url(""),linear-gradient(to top, #244B5A 0, #244B5A 100%); } .hero-rebrand-2025.hero-overlap .hero-content.banner-chevrons-green::before, .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content.banner-chevrons-green::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content.banner-chevrons-green::before{/* Green */ background-image: url(""),linear-gradient(to top, #007D80 0, #007D80 100%); } .hero-rebrand-2025.hero-overlap .hero-content.banner-chevrons-red-orange::before, .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content.banner-chevrons-red-orange::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content.banner-chevrons-red-orange::before{/* Red Orange */ background-image: url(""),linear-gradient(to top, #EF4636 0, #EF4636 100%); } .hero-rebrand-2025.hero-overlap .hero-content.banner-chevrons-monarch::before, .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content.banner-chevrons-monarch::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content.banner-chevrons-monarch::before{/* Monarch */ background-image: url(""),linear-gradient(to top, #A12D4D 0, #A12D4D 100%); } @media screen and (max-width: 767px) { .hero-rebrand-2025.hero-overlap .hero-content::before, .hero-rebrand-2025.hero-overlap.hero-content-left .hero-content::before { width: 100%; } .hero-rebrand-2025.hero-overlap.hero-content-right .hero-content::before {left: 0; width: 100%; } .hero-rebrand-2025.hero-overlap .hero-image img {max-width: 90%;} } /* homepage gradient box chevrons */ .hero-rebrand-2025.hero-gradient {display: flex; justify-content: center; gap: 0; max-width: 1440px; margin: 0 auto; position: relative; align-items: unset; overflow: hidden;} .hero-rebrand-2025.hero-gradient .hero-image {z-index: 1; min-width: 550px; margin: 0; align-items: center;} .hero-rebrand-2025.hero-gradient .hero-content::before, .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content::before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 100%; z-index: -1; /* shift to left */ background-size: auto, 100% 100%; background-repeat: no-repeat, no-repeat; background-position: left top, left top; } .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content::before { left: -20%; top: 0; height: 100%; width: 120%; /* shift to right */ background-size: auto, 100% 100%; background-repeat: no-repeat, no-repeat; background-position: right top, left top; } .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content::before {/* default */ background-image: url(""), linear-gradient(to right, #A12D4D 0, #A12D4D 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content::before { background-image: url(""), linear-gradient(to left, #A12D4D 0, #A12D4D 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-black::before {/* Black */ background-image: url(""), linear-gradient(to right, #000000 0, #000000 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-black::before { background-image: url(""), linear-gradient(to left, #000000 0, #000000 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-dark-slate-gray::before {/* Dark Slate Gray */ background-image: url(""), linear-gradient(to right, #244B5A 0, #244B5A 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-dark-slate-gray::before { background-image: url(""), linear-gradient(to left, #244B5A 0, #244B5A 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-green::before {/* Green */ background-image: url(""), linear-gradient(to right, #007D80 0, #007D80 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-green::before { background-image: url(""), linear-gradient(to left, #007D80 0, #007D80 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-red-orange::before {/* Red Orange */ background-image: url(""), linear-gradient(to right, #EF4636 0, #EF4636 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-red-orange::before { background-image: url(""), linear-gradient(to left, #EF4636 0, #EF4636 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-monarch::before {/* Monarch */ background-image: url(""), linear-gradient(to right, #A12D4D 0, #A12D4D 83%, transparent 100%);} .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-monarch::before { background-image: url(""), linear-gradient(to left, #A12D4D 0, #A12D4D 83%, transparent 100%);} @media screen and (max-width: 1200px) { .hero-rebrand-2025.hero-gradient .hero-image {min-width: 300px;} } @media screen and (max-width: 767px) { .hero-rebrand-2025.hero-gradient .hero-content::before, .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content::before{ top: -15%; left: 0; width: 100%; height: 120%; z-index: -1; background-position: left top, left top; } .hero-rebrand-2025.hero-gradient .hero-image {min-width: unset} /* gradient to vertical */ .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content::before {background-image: url(""),linear-gradient(to top, #A12D4D 0, #A12D4D 80%, transparent 100%);} /* default */ .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-black::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-black::before {background-image: url(""),linear-gradient(to top, #000000 0, #000000 80%, transparent 100%);} /* Black */ .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-dark-slate-gray::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-dark-slate-gray::before {background-image: url(""),linear-gradient(to top, #244B5A 0, #244B5A 80%, transparent 100%);} /* Dark Slate Gray */ .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-green::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-green::before {background-image: url(""),linear-gradient(to top, #007D80 0, #007D80 80%, transparent 100%);} /* Green */ .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-red-orange::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-red-orange::before {background-image: url(""),linear-gradient(to top, #EF4636 0, #EF4636 80%, transparent 100%);} /* Red Orange */ .hero-rebrand-2025.hero-gradient.hero-content-left .hero-content.banner-chevrons-monarch::before, .hero-rebrand-2025.hero-gradient.hero-content-right .hero-content.banner-chevrons-monarch::before {background-image: url(""),linear-gradient(to top, #A12D4D 0, #A12D4D 80%, transparent 100%);} /* Monarch */ } /* interior banner chevron image overlay gradient */ .hero-rebrand-2025.chevron-layout-gradient .hero-image::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background-repeat: repeat-x; background-position: top left; } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-black::after { background-image: url(""),linear-gradient(to top, #000 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-dark-slate-gray::after { background-image: url(""),linear-gradient(to top, #244B5A 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-green::after { background-image: url(""),linear-gradient(to top, #007D80 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-blue::after { background-image: url(""),linear-gradient(to top, #00A9BC 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-red-orange::after { background-image: url(""),linear-gradient(to top, #EF4636 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-monarch::after { background-image: url(""),linear-gradient(to top, #A12D4D 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-golden-hour::after { background-image: url(""),linear-gradient(to top, #FEBE2C 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-gray::after { background-image: url(""),linear-gradient(to top, #DCE4E2 0, transparent 100%); } .hero-rebrand-2025.chevron-layout-gradient .hero-image.banner-chevrons-light-purple::after { background-image: url(""),linear-gradient(to top, #B2BEDC 0, transparent 100%); } /* interior banner scattered chevrons */ .hero-rebrand-2025.chevron-layout-scatter .hero-image::before { content: ""; position: absolute; top: -20px; left: -5%; width: 110%; height: 100%; /* height of top background */ background-image: url(""); background-position: left top; background-repeat: no-repeat; background-size: contain; } .hero-rebrand-2025.chevron-layout-scatter .hero-image::after { content: ""; position: absolute; bottom: -52px; left: -5%; width: 110%; height: 210px; /* height of top background */ background-image: url(""); background-position: center top; background-repeat: no-repeat; background-size: contain; } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-black::before {filter: brightness(0) saturate(100%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-black::after {filter: brightness(0) saturate(100%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-dark-slate-gray::before {filter: invert(23%) sepia(8%) saturate(3270%) hue-rotate(151deg) brightness(96%) contrast(86%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-dark-slate-gray::after {filter: invert(23%) sepia(8%) saturate(3270%) hue-rotate(151deg) brightness(96%) contrast(86%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-green::before {filter: invert(31%) sepia(84%) saturate(7358%) hue-rotate(172deg) brightness(98%) contrast(101%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-green::after { filter: invert(31%) sepia(84%) saturate(7358%) hue-rotate(172deg) brightness(98%) contrast(101%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-blue::before { filter: invert(68%) sepia(75%) saturate(435%) hue-rotate(168deg) brightness(93%) contrast(92%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-blue::after { filter: invert(68%) sepia(75%) saturate(435%) hue-rotate(168deg) brightness(93%) contrast(92%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-red-orange::before {filter: invert(40%) sepia(71%) saturate(5102%) hue-rotate(345deg) brightness(102%) contrast(87%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-red-orange::after {filter: invert(40%) sepia(71%) saturate(5102%) hue-rotate(345deg) brightness(102%) contrast(87%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-monarch::before { filter: invert(22%) sepia(83%) saturate(1407%) hue-rotate(314deg) brightness(89%) contrast(91%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-monarch::after {filter: invert(22%) sepia(83%) saturate(1407%) hue-rotate(314deg) brightness(89%) contrast(91%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-golden-hour::before { filter: invert(85%) sepia(46%) saturate(1522%) hue-rotate(333deg) brightness(101%) contrast(99%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-golden-hour::after { filter: invert(85%) sepia(46%) saturate(1522%) hue-rotate(333deg) brightness(101%) contrast(99%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-gray::before {filter: invert(92%) sepia(6%) saturate(149%) hue-rotate(115deg) brightness(98%) contrast(93%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-gray::after { filter: invert(92%) sepia(6%) saturate(149%) hue-rotate(115deg) brightness(98%) contrast(93%);} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-light-purple::before {filter: invert(76%) sepia(20%) saturate(608%) hue-rotate(189deg) brightness(89%) contrast(84%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-light-purple::after {filter: invert(76%) sepia(20%) saturate(608%) hue-rotate(189deg) brightness(89%) contrast(84%); } .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-multicolor::before { background-image: url("");} .hero-rebrand-2025.chevron-layout-scatter .hero-image.banner-chevrons-multicolor::after { background-image: url("");} @media screen and (max-width: 767px) { .hero-rebrand-2025.hero-content-right {flex-direction: column;} .hero-rebrand-2025.hero-content-left {flex-direction: column;} .hero-rebrand-2025 .hero-content {padding: 20px; margin-top: -20px; z-index: 2;} /* brings gradient up over image */ .hero-rebrand-2025 .hero-image {max-width: unset;} .hero-rebrand-2025.chevron-layout-scatter .hero-image {max-width: 90%;} .hero-2025-title {font-size: 2.625rem;} .hero-2025-subtitle {font-size: 1.3rem;} .hero-rebrand-2025.hero-overlap, .hero-rebrand-2025.hero-gradient {gap: 0; margin: 0;} } @media screen and (max-width: 500px) { .hero-rebrand-2025.chevron-layout-scatter .hero-image::after {height: 131px;} } /* Personal and Business banking login box tabs */ .b-tabs-container { position: relative; z-index: 1; } .b-tabs-container [role="tablist"] { display: flex; align-items: flex-end; column-gap: 2px; padding: 0; margin-bottom: -2px; z-index: 2; } .b-tab-btn { flex: 1; padding: 5px; margin: 0; cursor: pointer; background: #A12D4D; color: white; border: 2px solid #A12D4D; border-bottom: none; font-size: 1rem; border-radius: 0 !important; opacity: 1 !important; } .b-tab-btn:focus { outline: none; } .b-tab-btn:focus-visible { outline: 2px solid #A12D4D; } .b-tab-btn.active, .b-tab-btn:hover { background: white; color: #A12D4D; font-weight: bold; border: 2px solid #A12D4D; border-bottom: none; box-shadow: 0 0 10px rgba(0, 86, 179, 0.3); } .b-tab-content { margin-top: 0; padding: 3px 10px; border: 2px solid #A12D4D; z-index: 1; } .b-tabs-container [hidden] { display: none !important; } .b-tab-content button { font-size: 1rem; } .b-tab-content .ob-login-footlinks { display: flex; margin: 5px; padding: 0; } /* End of File - make sure all CSS is ABOVE this comment */