@charset "utf-8"; /* CSS Document */ @font-face { font-family: 'MarkOT'; src: local('MarkOT-LightItalic'), url('fonts/MarkOT-LightItalic.woff2') format('woff2'), url('fonts/MarkOT-LightItalic.woff') format('woff'); font-weight: 100; font-style: italic; } @font-face { font-family: 'MarkOT'; src: local('MarkOT'), url('fonts/MarkOT.woff2') format('woff2'), url('fonts/MarkOT.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MarkOT'; src: local('MarkOT-BoldItalic'), url('fonts/MarkOT-BoldItalic.woff2') format('woff2'), url('fonts/MarkOT-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; } @font-face { font-family: 'MarkOT'; src: local('MarkOT-Medium'), url('fonts/MarkOT-Medium.woff2') format('woff2'), url('fonts/MarkOT-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'MarkOT'; src: local('MarkOT-Bold'), url('fonts/MarkOT-Bold.woff2') format('woff2'), url('fonts/MarkOT-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'MarkOT'; src: local('MarkOT-Light'), url('fonts/MarkOT-Light.woff2') format('woff2'), url('fonts/MarkOT-Light.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Sentinel'; src: local('Sentinel Book'), local('Sentinel-Book'), url('fonts/Sentinel-Book.woff2') format('woff2'), url('fonts/Sentinel-Book.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Sentinel'; src: local('Sentinel Book Italic'), local('Sentinel-BookItalic'), url('fonts/Sentinel-BookItalic.woff2') format('woff2'), url('fonts/Sentinel-BookItalic.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Sentinel'; src: local('Sentinel Bold Italic'), local('Sentinel-BoldItalic'), url('fonts/Sentinel-BoldItalic.woff2') format('woff2'), url('fonts/Sentinel-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Sentinel'; src: local('Sentinel Bold'), local('Sentinel-Bold'), url('fonts/Sentinel-Bold.woff2') format('woff2'), url('fonts/Sentinel-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } :root { --grid-width: 1364px; /* Base Width is Set Here */ --grid-minus-one: 1363px; /* Set max-width as base-width minus 1 pixel */ --grid-half-width: 682px; /* Half Base Width */ --grid-gutter: 15px; /* Gutter Width is set here. Just put half the gutter width here. */ --header-height: 103px; --primary-color: #ef4924; --secondary-color: #25375d; --tertiary-color: #f7f8f9; --quaternary-color: #6d6e71; --quinary-color: #58595b; --senary-color: #FFFFFF; --gray-shade: #f7f8f9; --primary-font: 'MarkOT', sans-serif; --secondary-font: 'Sentinel', serif; --standard-font-size: 14px; --line-height: 1.5; } /* Base Template Settings */ body { font-family: 'MarkOT', sans-serif; } #page-head hgroup, #page-foot section, div section { max-width: 1364px;; } .halves > .half > section { max-width: 682px; } .halves > .half > section, .listed li, [class^="box-"], [class*=" box-"] { padding: 15px; } .cta { } input { border-radius: 0px; } .home > .smoothscroll { color: #FFF; text-transform: uppercase; text-decoration: None; font-family: 'MarkOT', sans-serif; font-size: 10px; position: absolute; top: 30px; left: 30px; z-index: 99; letter-spacing: 0.3ex; transition: all .25s; } .home > .smoothscroll:hover { color: #25375d; letter-spacing: 0.5ex; } article li, article p, .p { font-family: 'MarkOT', sans-serif; font-size: 14px; margin-bottom: 14px; line-height: 2.28; color: #6d6e71; } article h1, .h1 { font-family: 'MarkOT', sans-serif; line-height: 1.5; margin-bottom: 14px; font-size: 50px; font-weight: bold; } .content article h1 { font-family: 'MarkOT', sans-serif; line-height: 1.5; margin-bottom: 14px; font-size: 30px; font-weight: bold; color: #25375d; letter-spacing: .3ex; margin-left: -50px; } article h2, .h2 { font-family: 'MarkOT', sans-serif; line-height: 1.79; font-size: 35px; color: #25375d; font-weight: bold; margin-bottom: 14px; } article h3, .h3 { font-family: 'MarkOT', sans-serif; font-size: 21.32px; font-weight: 400; letter-spacing: .45ex; text-transform: uppercase; line-height: 1.5; margin-bottom: 14px; } article h4, .h4 { font-family: 'MarkOT', sans-serif; line-height: 1.5; margin-bottom: 14px; } article h5, .h5 { font-family: 'MarkOT', sans-serif; font-size: 17.58px; letter-spacing: .45ex; line-height: 1.5; margin-bottom: 25px; text-transform: uppercase; font-weight: 500; } article h6, .h6 { font-family: 'MarkOT', sans-serif; line-height: 1.5; margin-bottom: 14px; } article blockquote, .blockquote { font-family: 'MarkOT', sans-serif; line-height: 1.5; margin-bottom: 14px; } details { font-family: 'MarkOT', sans-serif; font-size: 14px; margin-bottom: 14px; line-height: 1.5; } article blockquote cite, .blockquote cite { font-family: 'MarkOT', sans-serif; line-height: 1.5 } article a { color: #ef4924; } article a:hover { color: #25375d; } article a[href^="tel:"] { color: #6d6e71; text-decoration: None; } article a[href^="tel:"]:hover { color: #ef4924; } .cta { background: #ef4924; color: #FFF; font-size: 12px; letter-spacing: .4ex; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; transition: all .25s; padding-left: 0px; padding-right: 0px; width: 152px; height: 52px; } .cta span { position: static; width: 100%; display: block; text-align: center; } .cta span b { font-weight: inherit; } .cta:hover { background: #25375d; opacity: 1; color: #FFF; } .cta-2 { background: #25375d; font-size: 12px; letter-spacing: .4ex; padding: 23px 30px; transition: all .25s; color: #FFF; text-decoration: None; text-transform: uppercase; color: #FFF; } .cta-2:hover { background: #ef4924; color: #FFF; } h1 em, h2 em, h3 em, h4 em, h5 em { font-weight: inherit; color: #ef4924; font-style: normal; } /* Form Settings */ ::-webkit-input-placeholder { color: #25375d; } :-moz-placeholder { color: #25375d; } ::-moz-placeholder { color: #25375d; } :-ms-input-placeholder { color: #25375d; } input[type=radio] { width: 20px; height: 20px; display: inline-block; border-width: 2px; border-style: solid; border-color: #ef4924; position: absolute; border-radius: 50%; } input[type=radio]:checked:after { content: ""; position: absolute; top: 5px; left: 5px; width: 10px; display: block; padding-bottom: 10px; background-color: #ef4924; border-radius: 50%; } input[type=checkbox] { width: 20px; height: 20px; display: inline-block; border-width: 2px; border-style: solid; border-color: #ef4924; position: absolute; } input[type=checkbox]:checked:after { content: "✔"; position: absolute; top: 5px; left: 5px; color: #ef4924; } textarea, input[type=search], input[type=number], input[type=email], select, input[type=date], input[type=password], input[type=text] { font-family: 'MarkOT', sans-serif; width: 100%; height: 50px; padding-left: 15px; border-width: 1px; border-style: solid; border-color: #ef4924; font-size: 14px; margin-bottom: 14px } .select-wrapper { position: relative; } .select-wrapper:after { position: absolute; top: 0px; right: 0px; width: 50px; height: 50px; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; content: "\f0d7"; font-family: 'Font Awesome 5 Free'; font-weight: 900; } select { padding-right: 50px; } textarea { height: 100px; padding-top: 15px; } input[type=submit], button, input[type=button] { font-family: 'MarkOT', sans-serif; } #login-frame { width: 100%; height: 270px; } #nav-login-frame { width: 100%; height: 170px; } /* Header Settings */ @keyframes fromthetop { 0 { transform: translateY( -145px ) } 100% { transform: translateY( 0px ) } } @keyframes stageleft{ 0% { transform: translateX( 100% ) } 100%{ transform: translateX( 0% ) } } @keyframes enterfromright{ 0% { transform: translateX( 900% ) } 100%{ transform: translateX( 0% ) } } @keyframes stagecenter { 0% { width: 100%; } 50% { width: 100%; } 100%{ width: calc( 100% - 335px ); } } @keyframes righttrim{ 0% { transform: translateX( 100% ) } 50% { transform: translateX( 100% ) } 100%{ transform: translateX( 0% ) } } @keyframes sliderr{ 0% { transform: translateX(0%); } 90% { transform: translateX(0%); } 100%{ transform: translateX(30%); } } @keyframes expandable{ 0% { width: 0%; } 90% { width: 0% } 100%{ width: 50%; } } @keyframes line1{ 0% { transform: translateX(-100%); opacity: 1; } 100%{ transform: translateX(100%); opacity: 1; } } @keyframes line2{ 0% { transform: translateY(-100%); opacity: 1; } 100%{ transform: translateY(100%); opacity: 1; } } @keyframes line3{ 0% { transform: translateX(100%); opacity: 1; } 100%{ transform: translateX(-100%); opacity: 1; } } @keyframes line4{ 0% { transform: translateY(100%); opacity: 1; } 100%{ transform: translateY(-100%); opacity: 1; } } @keyframes line5{ 0% { transform: translate(500px,-500px); opacity: 1; } 100%{ transform: translate(-500px,500px); opacity: 1; } } @keyframes line6{ 0% { transform: translate(-500px,500px); opacity: 1; } 100%{ transform: translate(500px,-500px); opacity: 1; } } @keyframes fadeIn{ 0% { opacity: 0; } 90% { opacity: 0; } 100%{ opacity: .5; } } @keyframes resize{ 0% { width: 85%; left: -10px; } 90% { width: 85%; left: -10px; } 100%{ width: 72%; left: 0% } } @keyframes loginfly{ 0% { transform: translateX( 200% ) } 66% { transform: translateX( 200% ) } 100%{ transform: translateX( 0% ) } } @keyframes sweep { 0% {opacity: 0; margin-left: -10px} 100% {opacity: 1; margin-left: 0px} } #alert-bar { background: #25375d; padding: 15px 25px; color: #FFF; font-size: 14px; height: 105px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #alert-bar section { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 100%; padding-left: 50px; padding-right: 50px; } #alert-bar article { padding-right: 25px; line-height: 1.5; } #alert-bar article a { color: #FFF; font-weight: 600; text-decoration: none; } #alert-bar a.cta { border: 2px solid #FFF; color: #FFF; background: none; margin-left: 25px; min-width: 150px; } #alert-bar a.cta:hover { color: #25375d; background: #FFF; } .home #alert-bar + #page-head + a.smoothscroll { top: 135px; } .home #alert-bar + #page-head { top: calc( 100vh - 103px ) } .home #alert-bar + #page-head.navfixed { top: 0px; } .home #page-head.navfixed { animation: fromthetop 1.5s ease-out 1; -ms-animation: fromthetop 1.5s ease-out 1; } .home #page-head hgroup #nav #main > .menu-item-has-children > a { z-index: 1!important; } .home #page-head hgroup #nav #main > .menu-item-has-children > a > ul { z-index: 2!important; } .home #page-head.down hgroup #nav #main > .menu-item-has-grand-children > ul .menu-item-has-children > ul, .home #page-head.navfixed hgroup #nav #main > .menu-item-has-grand-children > ul .menu-item-has-children > ul { top: 100%; bottom: auto; } .home #page-head hgroup #nav #main > li.menu-item-has-children a + ul.expand, .home #page-head hgroup #nav #main > li.menu-item-has-children:hover a + ul { padding-top: 25px; padding-bottom: 75px; } .home #page-head.down hgroup #nav #main > li.menu-item-has-children:hover a + ul, .home #page-head.down hgroup #nav #main > li.menu-item-has-children a:hover + ul, .home #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul.expand, .home #page-head.navfixed hgroup #nav #main > li.menu-item-has-children:hover a + ul, .home #page-head.navfixed hgroup #nav #main > li.menu-item-has-children a + ul.expand, .home #page-head.navfixed hgroup #nav #main > li.menu-item-has-children a:hover + ul { padding-bottom: 25px; padding-top: 75px; bottom: auto; } .home #page-head.navfixed hgroup #nav #main > li.menu-item-has-children a + ul { top: 27px; bottom: auto; } .home #page-head.navfixed, #page-head { background: #FFFFFF; height: 103px; position: fixed; left: 0px; top: 0px; z-index: 4!important; width: 100%; border-bottom: 1px solid var(--gray-shade); border-bottom: 1px solid #f7f8f9; transition: None; } .home #page-head { top: calc( 100vh - 141px ); position: absolute; } #page-head hgroup { height: 103px; } #page-head hgroup .logo { width: 43px; height: 43px; margin: 35px 0px 0px 75px; transition: all .25s; } #page-head hgroup .logo:hover { width: 50px; height: 50px; margin: 31px 0px 0px 71px; } #page-head hgroup .logo svg .primary { fill: #ef4924; } #page-head hgroup .logo svg .secondary { fill: #25375d; } #page-head hgroup #nav { margin-right: 103px; width: calc( 100% - 300px); } #page-head hgroup #nav #main { width: 100%; } #page-head hgroup #nav #main > li > a { color: #25375d; text-decoration: None; margin: 0px; font-family: 'MarkOT', sans-serif; font-size: 12px; padding: 44px 7px; letter-spacing: .4ex; position: relative; text-transform: uppercase; z-index: 5!important; } #page-head hgroup #nav #main > li.menu-item-has-grand-children > a { z-index: 2!important; } #page-head hgroup #nav #main > li.menu-item-has-grand-children > a:before { position: absolute; top: 50%; margin-top: -13px; left: 0px; width: 40px; height: 0px; content: ""; background: #ef4924; transition: height .25s ease-in; z-index: -1; } #page-head hgroup #nav #main li:first-child a { margin-left: 0px; } #page-head hgroup #nav #main .current-menu-item a, #page-head hgroup #nav #main .active a, #page-head hgroup #nav #main a:hover { color: #25375d; opacity: 1; } /* This is the Hover/Active state for the menu item */ .home #page-head hgroup #nav #main > li.menu-item-has-children a:hover + ul { padding-bottom: 75px; padding-top: 25px; } .home #page-head hgroup #nav #main > li.menu-item-has-children a + ul { top: auto; bottom: 27px; } #page-head hgroup #nav #main > li > a:before { position: absolute; top: 50%; margin-top: -13px; left: 0px; width: 0px; height: 26px; content: ""; background: #ef4924; transition: width .25s ease-in; z-index: -1; } #page-head hgroup #nav #main > li.active > a:before, #page-head hgroup #nav #main > li:hover > a:before { width: 100%; } #page-head hgroup #nav #main > li.menu-item-has-grand-children.active > a:before, #page-head hgroup #nav #main > .menu-item-has-grand-children.current-menu-item > a:before, #page-head hgroup #nav #main > .menu-item-has-grand-children.active > a:before, #page-head hgroup #nav #main > li.menu-item-has-grand-children:hover > a:before, #page-head hgroup #nav #main > li.menu-item-has-grand-children > a:hover:before { height: 82px; width: 40px; max-height: 82px; } .home #page-head hgroup #nav #main > .menu-item-has-grand-children > ul .menu-item-has-children > ul { top: auto; bottom: 100%; z-index: 3; display: flex; flex-direction: column-reverse; } .home #page-head.down hgroup #nav #main > .menu-item-has-grand-children > ul .menu-item-has-children > ul, .home #page-head.navfixed hgroup #nav #main > .menu-item-has-grand-children > ul .menu-item-has-children > ul { display: block; } .home #page-head hgroup #nav #main > .menu-item-has-children > ul { display: flex; flex-direction: column-reverse; } #page-head hgroup #nav #main > li.menu-item-has-children:hover a + ul, #page-head hgroup #nav #main > li.menu-item-has-grand-children:hover a + ul { z-index: 4!important; } .home #page-head.down hgroup #nav #main > .menu-item-has-children > ul, .home #page-head.navfixed hgroup #nav #main > .menu-item-has-children > ul{ display: block; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul { white-space: nowrap; width: auto; background: #f1f2f2; margin-top: 0px; padding-left: 60px; left: -20px; z-index: 3; transition: all .125s; } #page-head hgroup #nav #main > .menu-item-has-grand-children.active > ul { max-height: 600%; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul li { display: inline-block; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul li a { font-family: 'MarkOT', sans-serif; font-size: 14px; font-weight: normal; color: #25375d; padding: 12px 50px; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul li.active a, #page-head hgroup #nav #main > .menu-item-has-grand-children > ul li a:hover { color: #ef4924 } #page-head hgroup #nav #main > .menu-item-has-grand-children.active > ul, #page-head hgroup #nav #main > .menu-item-has-grand-children:hover > ul { overflow: visible; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul { max-height: 0px; overflow: hidden; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children:hover ul, #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children:active ul { max-height: 800%; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul { word-wrap: break-word; left: 0px; max-height: 0px; overflow: hidden; padding-left: 0px; background: rgba(241,242,242,1); } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul li { display: block; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul li a { padding: 15px 0px; color: #25375d; display: block; text-align: center; padding-left: 15px; padding-right: 15px; white-space: normal; font-family: 'MarkOT', sans-serif; font-size: 12px; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul li.active a, #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul li a:hover { color: #ef4924; } .home #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul { background: #FFF; left: -40px; width: calc( 100% + 80px ); top: 27px; transition: all .25s; z-index: 3!important; box-shadow: None; padding-bottom: 0px; } .home #page-head.down hgroup #nav #main > .menu-item-has-children > a, #page-head hgroup #nav #main > li.menu-item-has-children a { z-index: 5!important; } .home #page-head hgroup #nav #main > li.menu-item-has-children a + ul { z-index: 0!important; } #page-head hgroup #nav #main > li.menu-item-has-children:hover a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul.expand, #page-head hgroup #nav #main > li.menu-item-has-children a:hover + ul { padding-top: 75px; padding-bottom: 25px; box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.25)!important; } #page-head hgroup #nav #main > li.menu-item-has-children > ul > li > a { color: #25375d; text-decoration: None; margin: 0px; font-family: 'MarkOT', sans-serif; font-size: 12px; padding: 18px 0px; letter-spacing: .4ex; position: relative; display: block; text-align: center; text-transform: uppercase; } #page-head hgroup #nav #main > li.menu-item-has-children > ul > li.active > a, #page-head hgroup #nav #main > li.menu-item-has-children > ul > li > a:hover { color: #ef4924 } #page-head hgroup #nav #main > li:last-child a { color: #ef4924; } #page-head hgroup #nav #main > li:last-child a:hover { color: #6d6e71; } #page-head hgroup #nav #main > li:last-child > a:before { display: None; } #page-head hgroup #nav #main > li:last-child li a { font-size: 10px; font-family: 'Sentinel', serif; color: #25375d; text-align: center; font-style: italic; display: block; } #page-head hgroup #nav #main > li:last-child li a:hover { color: #ef4924; } #page-head hgroup #nav #main li input { border: None; margin-left: 28px; margin-right: 28px; border: None; text-align: center; font-size: 11px; text-transform: uppercase; height: 25px; width: calc( 100% - 56px ); padding-left: 0px; border-bottom: 1px solid #e2e2e2; margin-top: 20px; letter-spacing: 0.3ex; } #page-head hgroup #nav #main li button { background: #ef4924; width: 55px; height: 32px; font-size: 10px; margin: 20px auto 0px; border: None; display: block; } #page-head hgroup #nav #main li button:hover { background: #25375d; } /* Header Image Settings */ #header-image .login-form .login-inner iframe { height: 250px; width: 100%; } #header-image .login-form .login-inner iframe ~ a { position: relative; text-transform: uppercase; font-size: 10px; letter-spacing: .4ex; color: #25375d; text-decoration: None; padding: 0px 10px; display: inline-block; transition: all .25s; } #header-image .login-form .login-inner iframe ~ a:before { width: 30px; height: 1px; content: ""; position: absolute; right: 100%; top: 5px; background: #25375d;display: block; transition: all .25s; } #header-image .login-form .login-inner iframe ~ a:after { width: 30px; height: 1px; content: ""; position: absolute; left: 100%; top: 5px; background: #25375d;display: block; transition: all .25s; } #header-image .login-form .login-inner iframe ~ a:hover:before, #header-image .login-form .login-inner iframe ~ a:hover:after { width: 50px; transition: all .25s; } #header-image { position: relative; margin-bottom: 103px; height: calc( 100vh - 141px ); background: transparent; overflow: hidden; width: 100%; } #header-image .header-inner { overflow: hidden; background: #ef4924; animation: stageleft .75s ease-out 1; -ms-animation: stageleft .75s ease-out 1; position: relative; } #header-image .header-inner:before { position: absolute; top: 0px; right: 0px; width: calc( 50vw - 682px ); height: 100%; background: #FFF; content: " "; display: block; animation: righttrim 1.5s ease-out 1; -ms-animation: righttrim 1.5s ease-out 1 } #header-image section { } #header-image section:after { clear: both; display: block; } #header-image .slider { width: calc( 100% - 335px - ( 50vw - 682px ) ); margin-left: 0px; float: left; animation: stagecenter 1.5s ease-out 1; -ms-animation: stagecenter 1.5s ease-out 1; } #header-image ul.bxslider li { background: #ef4924; height: calc( 100vh - 103px ); } #header-image ul.bxslider li.mobilecreep { background-position: center -100px!important; } #header-image ul.bxslider li article { text-align: left; color: #FFF; max-width: 680px; font-size: 12px; } #header-image ul.bxslider li article h1 { font-size: 60px; color: #FFF; font-weight: bold;} #header-image ul.bxslider li article a.cta { margin-right: 20px;} #header-image ul.bxslider li article a.cta.long { width: 250px; } #header-image ul.bxslider li article span { letter-spacing: 0.3ex; text-transform: uppercase; } #header-image .disclaimer { color: #FFF; font-size: 20px; font-weight: 400; position: absolute; bottom: 130px; padding-right: 100px; } #header-image ul.bxslider li > div { height: calc( 100vh - 103px ); max-width: 1029px; width: 100%; margin-left: calc( 50vw - 682px ); position: relative; } #header-image ul.bxslider li.new-header > div article { max-width: 890px; } #header-image ul.bxslider li.new-header > div article a.cta { float: left; height: 65px; width: 215px; font-size: 16px; } #header-image ul.bxslider li.new-header > div article a.cta + span { float: left; text-transform: none; display: inline-block; width: calc( 100% - 280px ); font-size: 14px; } /* first slide */ #header-image .bxslider li svg.enn { width: 72%; max-width: 740px; height: auto; animation: 5s linear 0s 1 resize; position: absolute; left: 0%; z-index: 2; margin-top: 1%; bottom: 50%; transform: translateY(50%) } #header-image .bxslider li svg.enn * { } #header-image .bxslider li svg.enn .fill { animation: 3s linear 0s 1 fadeIn; } #header-image .bxslider li .lines-bg { position: absolute; bottom: 49%; left: -10px; width: 74%; max-width: 740px; height: auto; max-height: 100vh; z-index: 1; transform: translateY(50%); } _:-ms-fullscreen, :root #header-image .bxslider li .lines-bg { display: None!important; width: 0px; height: 0px; } #header-image .bxslider li .lines-bg * { } #header-image .bxslider li .lines-bg .st { opacity: 0; } #header-image .bxslider li .lines-bg .st-1 { animation: .75s ease-out 0s 4 line1; } #header-image .bxslider li .lines-bg .st-2 { animation: .75s ease-out .25s 4 line3; } #header-image .bxslider li .lines-bg .st-3 { animation: 1s ease-out .5s 4 line2; } #header-image .bxslider li .lines-bg .st-4 { animation: .75s ease-out .75s 4 line4; } #header-image .bxslider li .lines-bg .st-5 { animation: .5s ease-out 1 4 line3; } #header-image .bxslider li .lines-bg .st-6 { animation: 1s ease-out 1.25s 3 line1; } #header-image .bxslider li .lines-bg .st-7 { animation: .75s ease-out 1.5s 3 line4; } #header-image .bxslider li .lines-bg .st-8 { animation: 1s ease-out 1.75s 3 line2; } #header-image .bxslider li .lines-bg .st-9 { animation: .75s ease-out 1.25s 3 line5; } #header-image .bxslider li .lines-bg .st-10 { animation: .5s ease-out 1.5s 3 line6; } #header-image .bxslider li .lines-bg .st-11 { animation: 1s ease-out 1.75s 3 line5; } #header-image .bxslider li .lines-bg .st-12 { animation: .75s ease-out 1s 3 line6; } #header-image .bxslider li .lines-bg .st-13 { animation: 1s ease-out 1.25s 3 line5; } #header-image .bxslider li .typetext { width: 48%; float: right; overflow: hidden; animation: 6s linear expandable; text-align: left; position: absolute; top: 14px; right: 0px; height: 100%; } #header-image .bxslider li .typetext h1 { color: #FFF; font-size: 48px; line-height: 1.25; font-weight: bold; } #header-image .bx-pager { top: 50%; left: 30px; width: 3px; transform: translateY(-50%); padding-top: 48px; bottom: auto; } #header-image .bx-pager a { width: 3px; border-radius: 0%; border: None!important; height: 50px; margin: 10px auto; background: #cf3220; display: block; } #header-image .bx-pager a.active { background: #FFF; border: None; } #header-image .bx-next { opacity: 1!important; top: auto; bottom: 134px; right: -47px; width: 99px; height: 76px; background-image: url('../images/next.svg'); background-position: center; background-repeat: no-repeat; background-color: #25375d; background-size: 30px 60px; transition: all .25s; animation: ease-out 5s enterfromright } #header-image .bx-next:hover { background-color: #ef4924; } #header-image .login-form { width: 335px; float: right; background: #FFF; height: calc( 100vh - 141px ); animation: loginfly 2s ease-out 1; margin-right: calc( 50vw - 682px ); } #header-image .login-form .login-inner { max-width: 255px; padding: 0px 15px; margin: auto; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } #header-image .login-form .login-inner iframe { height: 250px; width: 100%; } #header-image .login-form .login-inner #logo-long{ margin-bottom: 0px; max-height: 55px; } #header-image .login-form .login-inner form { padding: 0px 20px; text-align: center; } #header-image .login-form .login-inner form input[type=text], #header-image .login-form .login-inner form input[type=password] { border-color: #25375d; border-width: 2px; margin: 10px 0px 20px; display: block; font-size: 11px; letter-spacing: .3ex; text-align: center; font-weight: 500; padding-left: 0px;; } #header-image .login-form .login-inner form input[type=password] + a + a, #header-image .login-form .login-inner form input[type=password] + a { font-family: 'Sentinel', serif; font-style: italic; position: relative; display: block; text-align: center; color: #25375d; text-decoration: none; text-transform: none; letter-spacing: 0; } #header-image .login-form .login-inner form input[type=password] + a + a:before, #header-image .login-form .login-inner form input[type=password] + a + a:after, #header-image .login-form .login-inner form input[type=password] + a:before, #header-image .login-form .login-inner form input[type=password] + a:after { display: none; } #header-image .login-form .login-inner form button{ margin-top: 31px; max-width: 75px; width: 100%; display: block; margin-left: auto; margin-right: auto; height: 38.5px; background: #ef4924; margin-bottom: 42px; border: None; letter-spacing: .3ex; transition: all .25s; cursor: pointer; } #header-image .login-form .login-inner form button:hover { background: #25375d; } #header-image .login-form .login-inner form a { position: relative; text-transform: uppercase; font-size: 10px; letter-spacing: .4ex; color: #25375d; text-decoration: None; padding: 0px 10px; display: inline-block; transition: all .25s; } #header-image .login-form .login-inner form input[type=password] + a + a:hover, #header-image .login-form .login-inner form input[type=password] + a:hover, #header-image .login-form .login-inner form a:hover { color: #ef4924 } #header-image .login-form .login-inner form a:before { width: 30px; height: 1px; content: ""; position: absolute; right: 100%; top: 5px; background: #25375d;display: block; transition: all .25s; } #header-image .login-form .login-inner form a:after { width: 30px; height: 1px; content: ""; position: absolute; left: 100%; top: 5px; background: #25375d;display: block; transition: all .25s; } #header-image .login-form .login-inner form a:hover:before, #header-image .login-form .login-inner form a:hover:after { width: 50px; transition: all .25s; } #blog-content { padding: 50px 25px; } .corner { width: 35px; height: 35px; position: absolute; } .primary * { fill: #ef4924; } .secondary * { fill: #25375d; } /* Content Settings */ #home-intro section { max-width: 1152px; padding: 85px 15px 123px; } #home-intro section .intro-copy { width: 65.95%; padding-top: 88px; position: relative; } #home-intro section .intro-copy h2 { max-width: 600px; margin-bottom: 92px; } #home-intro section .intro-copy article { max-width: 495px; } #home-intro section .intro-copy a.cta { margin: 50px 15px; } #home-intro section figure { width: 34.05%; float: right; padding: 15px 25px; } #home-intro section figure img { position: relative; max-width: 100%; } #home-intro section figure .mobile-pic { display: None; } #home-intro section .intro-copy .backbox { width: 376px; height: 125%; top: -5%; left: 100px; } .backbox { position: absolute; background: var(--gray-shade); background: #f7f8f9; z-index: -2; } #home-vid section .vid { width: calc( 100% - 165px ); position: relative; } #home-vid section .vid:before { content: ""; bottom: 0px; right: 155px; width: calc( 100% - 155px ); height: 78px; background: #FFF; position: absolute; z-index: 1; } #home-vid section .vid .bx-pager { display: None; } #home-vid section .vid .bx-controls-direction .bx-next { opacity: 1!important; top: auto; bottom: 0px; right: 155px; width: 79.25px; height: 78px; background: url('../images/next.svg') center no-repeat #25375d; background-size: 30px 60px; } #home-vid section .vid .bx-controls-direction .bx-prev { opacity: 1!important; top: auto; bottom: 0px; left: auto; right: 234px; width: 79.25px; height: 78px; background: url('../images/prev.svg') center no-repeat #25375d; background-size: 30px 60px; } #home-vid section .vid .bx-controls-direction .bx-next:hover, #home-vid section .vid .bx-controls-direction .bx-prev:hover { background-color: #ef4924; } #home-vid section .vid .corner { top: -50px; right: -50px; } #home-accounts section { max-width: 1152px; padding: 89px 40px 67px;; } #home-accounts section article { max-width: 380px; } #home-accounts section article h2 { line-height: 1.5; margin-bottom: 53px; } #home-accounts section article p { max-width: 330px; } #home-accounts section .needs { position: relative; right: -25px; top: 16px; list-style-type: None; } #home-accounts section .needs li { background: #f7f8f9; margin: 40px 0px; padding: 100px 60px 85px 104px; position: relative; cursor: pointer; } #home-accounts section .needs li a.overhaul { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; background: None; opacity: 0 } #home-accounts section .needs li > a { top: -30px; right: -43px; width: 87px; height: 66px; background: url('../images/next.svg') center no-repeat #25375d; background-size: 30px 60px; position: absolute; transition: all .25s; z-index: 2; font-size: 0px; } #home-accounts section .needs li:hover > a, #home-accounts section .needs li > a:hover { background-color: #ef4924; } #home-accounts section .needs li h5 { color: #ef4924; margin-bottom: 20px; } #home-accounts section .needs li h5 a { color: #ef4924; text-decoration: None; font-weight: 400; transition: all .25s; } #home-accounts section .needs li h5 a:hover { color: #25375d; } #home-accounts section .needs li p { font-family: 'Sentinel', serif; font-size: 17.58px; font-style: italic; color: #58595b; line-height: 1.75; } #home-accounts section .needs li figure { width: 100px; height: 100px; left: -50px; top: 50%; transform: translateY(-50%); position: absolute; } #home-accounts section .locations { margin-top: 160px; color: #FFF; background: #ef4924; position: relative; left: -160px; width: calc( 100% - 25px ); padding: 110px 100px 110px 127px; } #home-accounts section .locations h3.h3 { margin-bottom: 50px; } #home-accounts section .locations ul { list-style-type: None; letter-spacing: .4ex; } #home-accounts section .locations ul li { margin-bottom: 30px; font-size: 15px; } #home-accounts section .locations ul li:before { content: url('../images/pinpoint.svg'); width: 25px; height: 25px; display: inline-block; position: relative; top: 5px; margin-right: 17px; transition: all .25s; } #home-accounts section .locations ul li a { color: #FFF; text-decoration: None; transition: all .25s; } #home-accounts section .locations ul li:hover a { color: #25375d } #home-accounts section .locations ul li:hover:before { content: url('../images/marker-inactive.svg'); width: 25px; height: 25px; display: inline-block; position: relative; top: 5px; margin-right: 17px; } #home-accounts section .locations a.cta-2 { bottom: -30px; right: 30px; position: absolute; font-size: 16px; padding: 35px } #home-accounts section .locations a.cta-2:hover { background: #6d6e71 } #home-accounts section .locations .corner { top: -50px; right: -50px; } /* Location Page */ #header { margin-top: 172px; } #header section { max-width: 1054px; position: relative; } #header .text-box { width: 42%; float: left; padding-left: 22px; position: relative; } #header .text-box article { color: #FFF; background: #25375d; position: relative; display: block; width: 100%; } #header .text-box article p { max-width: 365px; font-weight: 100; color: #FFF; } #header .text-box article:before { position: absolute; content: ""; display: block; background: #25375d; top: -40px; left: -116px; height: calc( 100% + 90px ); width: calc( 100% + 200px ); z-index: -1; mix-blend-mode: multiply;} #header .text-box article:after { position: absolute; content: ""; display: block; background: #25375d; top: -40px; left: 240%; height: calc( 100% + 90px ); width: 80px; z-index: -2 } #header .text-box h1 { color: #FFF; margin-bottom: 22px; } #header .text-box:before { content: ""; } #header .backbox { height: 80%; width: 120%; left: -10%; top: 10%; } #header figure { width: 58%; float: right; } #header figure .pix-container { width: 100%; position: relative; overflow: hidden; padding-bottom: 76%; z-index: -2; } #header figure img { min-width: 100%; min-height: 100%; position: absolute; bottom: 50%; right: 50%; transform: translateX(50%) translateY(50%); max-width: 100%; } #header.short section { max-width: 1172px; } #header.short .text-box { width: 56%; } #header.short .text-box article h1 { margin-bottom: 0px; } #header.short .text-box article:before { height: calc( 100% + 80px ); } #header.short figure { width: 44%; } #header.short figure .pix-container { padding-bottom: 48.25%; } #header.short .text-box article:after { display: None; } #hours section { max-width: 1054px; padding-bottom: 125px; } #hours section .container { width: 42%; float: left; } #hours section .container input { display: None; } #hours section .container input + div { width: 100%; height: 0px; overflow: hidden; transition: all .25s; background: #f7f8f9; } #hours section .container label { position: relative; cursor: pointer; } #hours section .container label:after { position: absolute; top: 100%; right: 100%; width: 75px; height: 75px; background: url('../images/bottomright.svg') center no-repeat; background-size: contain; display: block; content: ""; } #hours section .container input + div .hours-inner { width: 100%; padding: 60px 25px; background: #f7f8f9; text-align: center; } #hours section .container input + div .hours-inner h5 { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #25375d; letter-spacing: .5ex; margin-bottom: 22px; } #hours section .container input + div .hours-inner time { display: block; font-size: 14px; margin-bottom: 9px; } #hours section .container input + div .hours-inner time + h5 { margin-top: 48px; } #hours section .container a.cta, #hours section .container label { float: right; } #hours section .container input:checked + div { height: 347px; } #hours section .container input:checked ~ label { margin-right:100%; width: 0px; height: 0px; padding: 0px; font-size: 0px; } #mapz { background: #f7f8f9; position: relative; } #mapz:before { content: ""; position: absolute; top: 0px; right: 0px; height: 100%; background: #FFF; width: calc( 50% - 566.5px ); z-index: 0; } #mapz section { max-width: 1133px; padding-top: 86px; padding-bottom: 20px; text-align: right; position: relative; } #mapz section:before { position: absolute; top: 0px; right: 0px; width: 266px; height: 100%; display: block; background: #FFF; content: ""; z-index: 0; } #mapz section .map-locations { list-style-type: None; width: 36.89%; float: left; } #mapz section #map-locations { padding: 42px 42px 0px;; list-style-type: None; text-align: left; } #mapz section #map-locations li { padding-left: 38px; margin-bottom: 47px; position: relative; } #mapz section #map-locations li:before { position: absolute; top: -8px; left: -7px; content: ""; width: 30px; height: 30px; background: url('../images/marker-inactive.svg') center no-repeat; background-size: contain; cursor: pointer; } #mapz section #map-locations li:hover:before, #mapz section #map-locations li.active:before { background: url('../images/marker-active.svg') center no-repeat; } #mapz section #map-locations li h5 { font-size: 16px; text-transform: uppercase; letter-spacing: .4ex; font-weight: bold; color: #25375d; margin-bottom: 3px; cursor: pointer; } #mapz section #map-locations li h5:after { content: ""; width: 0px; height: 4px; background: #ef4924; transition: all .25s; display: inline-block; margin-left: 10px; position: relative; top: -3px; } #mapz section #map-locations li address { height: 0px; transition: all .25s; color: #25375d; font-size: 16px; letter-spacing: -.07ex; line-height: 1.63; overflow: hidden; } #mapz section #map-locations li address a { color: #25375d; text-decoration: None; } #mapz section #map-locations li address a:hover { color: #ef4924; } #mapz section #map-locations li.active address { height: 155px; transition: all .25s; } #mapz section #map { width: 63.11%; float: left; background: #25375d; height: 500px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); } #mapz section #map-locations li.active h5:after { width: 50px; } #mapz section .map-links { color: #FFF; position: relative; z-index: 1; font-weight: 500; text-decoration: None; margin-top: 0px; margin-left: 25px; } #mapz section .map-links:hover { color: #FFF; } .clear { clear: both; display: block; } #holidays section { padding: 110px 0px; max-width: 900px; text-align: center; } #holidays section input[type=checkbox] { display: None; } #holidays section .hdays { height: 0px; transition: all .25s; overflow: hidden; background: #f7f8f9; } #holidays section figure { width: 100%; float: left; transition: all .25s; overflow: hidden; margin-bottom: 20px; } #holidays section figure img { max-width: 100%; float: left; } #holidays section label { position: relative; cursor: pointer; margin-left: 270px; margin-top: 20px; } #holidays section label:after { position: absolute; top: 100%; left: 100%; width: 75px; height: 75px; background: url('../images/bottomleft.svg') center no-repeat; background-size: contain; display: block; content: ""; } #holidays section #tabs { padding: 60px 25px; } #holidays section input[type=checkbox]:checked ~ .hdays { height: 285px; } #holidays section input[type=checkbox]:checked ~ label { width: 0px; height: 0px; padding: 0px; font-size: 0px; float: right; } #holidays section input[type=checkbox]:checked ~ figure { width: 0px; height: 0px; overflow: hidden; } #holidays section #tabs .side { width: 225px; float: left; } #holidays section #tabs .side h5 { color: #25375d; margin-bottom: 50px; font-size: 15px; text-align: center; } #holidays section #tabs .side ul { list-style-type: None; text-align: center; } #holidays section #tabs .side ul li { display: block; margin-bottom: 10px; } #holidays section #tabs .side ul li a { color: #25375d; text-decoration: None; font-weight: 400; letter-spacing: 0.25ex; position: relative; padding: 4px; } #holidays section #tabs .side ul li a em { position: relative; z-index: 1; } #holidays section #tabs .side ul li a:before { background: #ef4924; top: 0px; left: 0px; width: 0%; content: " "; transition: width .25s; position: absolute; height: 100%; z-index: 0; } #holidays section #tabs .main { padding: 0px 25px; float: right; width: calc( 100% - 225px ); } #holidays section #tabs .side ul li.ui-state-active a:before { width: 100%; } #holidays section #tabs dl dd { width: 100px; float: left; font-size: 12px; font-weight: 400; color: #25375d; margin-bottom: 15px; text-transform: uppercase; text-align: left;} #holidays section #tabs dl dt { width: calc( 100% - 100px ); float: left; font-size: 14px; font-weight: 300; color: #25375d; margin-bottom: 15px; text-align: left; } /* Search Bar */ #searchform { display: inline-block; font-size: 0px; line-height: 0px; position: relative; width: 100%; max-width: 382px; } #searchform input[type=search] { height: 55px; margin-bottom: 0px; border: None; max-width: 382px; width: 100%; } #searchform input, #searchform button { display: inline-block; } #searchform button { height: 55px; width: 55px; border: 1px solid #333; border-left: 0px; font-size: 22px; background: #FFF; color: #a7a9ac; font-family: 'Font Awesome 5 Free'; font-weight: 900; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; cursor: pointer; position: absolute; top: 0px; right: 0px; text-align: center; border: None; } #searchform button:before { content: " "; position: absolute; top: 0px; right: 0px; height: 100%; width: 100%; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; padding-left: 10px; text-align: center; background: url(../images/search.svg) center no-repeat; background-size: contain; } #searchform input[type=search]:focus { outline: None; } #searchform input[type=search]:focus + button { color: #FFF; background: #333; } #top-intro.content section aside .aside-inner.topbutton /* Standard Page styles */ #top-intro { margin-bottom: 0px; } #top-intro section { position: relative; max-width: 1084px; padding: 50px 30px; } #top-intro section main, #top-intro section aside { float: left; min-height: 1px; } #top-intro section main { width: 61.8%; } #top-intro section aside { width: 38.2%; text-align: center; margin-bottom: 10px; padding-left: 50px; padding-right: 50px; } #top-intro section main > h2 { margin-left: -60px; } #top-intro.content section aside { } #top-intro.content section aside .aside-inner.topbutton { position: relative; top: -100px; margin-bottom: -100px; } #top-intro.content section aside .aside-inner a.cta { width: 150px; } #top-intro section main > h2 { padding-top: 50px; } #top-intro section .graybox { width: 295px; height: 511px; top: 0px; left: -50px; background: var(--gray-shade); background: #f7f8f9; z-index: -1; position: absolute; } #top-intro section .graybox.short { height: 315px; } #top-intro.contact section .graybox.short { height: 265px; } #header.short.faq .text-box { padding-left: 0px; } #header.short.faq .text-box h1 { white-space: nowrap; } #header.short + #top-intro section { padding-top: 50px; } #header.short + #top-intro section main > h2 { padding-top: 0px; } #header.short + #top-intro.short-top section { padding-top: 20px; padding-bottom: 0px; margin-bottom: 0px; } #header.short + #top-intro.short-top { margin-bottom: 0px; } #contact-2 + hr, #top-intro + hr { width: 100%; max-width: 1161px; margin: auto; border: None; border-top: 1px solid #6d6e71; opacity: .2 } .content main article { max-width: 525px; } .content aside { text-align: center; } .content aside figure + a.cta { margin-top: -40px; margin-bottom: 40px; } .content .backbox { position: absolute; top: 0px; left: -50px; width: 235px; height: calc( 100% + 120px ); } .content .backbox.mortgage { height: 306px; } .content h2 { font-family: 'MarkOT', sans-serif; font-size: 16px; color: #25375d; text-transform: uppercase; font-weight: bold; letter-spacing: .3ex; margin-bottom: 30px; } .content.indent main h2 { text-indent: -50px; } .content details { margin-bottom: 50px; } .content p + details { margin-top: 50px; } .content details a.cta { margin-left: 0px; } .content a.cta, .content a.cta-2 { display: block; max-width: 160px; text-align: center; padding-left: 10px; padding-right: 10px; margin-top: 20px; width: 100%; margin-left: auto; margin-right: auto; width: 160px; height: 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } details.indent { padding-left: 30px; } details.indent p { padding-right: 50px; } details summary { position: relative; cursor: pointer; } details summary::-webkit-details-marker { display:None; } details summary:hover h2 { color: #ef4924; } details summary h2 { transition: all .25s; } details summary:before { position: absolute; color: #ef4924; font-size: 16px; left: -20px; top: 0px; content: "+"; font-weight: bold; transition: all .25s; } details.open summary:before, details[open] summary:before { content: "-"; transform: None!important; } details[open] summary ~ * { width: 100%; animation: sweep .5s ease-in-out; } details summary:hover:before { transform: rotate(45deg) } .vid-container { width: 100%; max-width: 895px; position: relative; margin: auto; margin-bottom: 150px; } .vid-container .slider .bx-wrapper { padding: 0px 10px 5px; } .vid-container .bx-pager a { width: 33.33%; float: left; display: block; padding: 10px; } .vid-container .bx-pager a img { max-width: 100%; } .vid-container .bx-pager:after { content: ""; clear: both; display: block; } .vid-container .toparrow { width: 50px; height: 50px; position: absolute; top: -50px; right: -50px; background: url(../images/top-right.svg) center no-repeat; background-size: contain; } .content { margin-bottom: 0px; } .content section { position: relative; max-width: 1084px; padding: 50px 30px; } .content section main, .content section aside { float: left; } .content section main { width: 61.8%; transition: all .25s; } .content main article a[href^="tel:"] { color: #6d6e71; text-decoration: None; } .content main article a[href^="tel:"]:hover { color: #ef4924; } .content section main p, .content section main ul, .content section main ul li { margin-bottom: 20px; list-style-type: None; font-family: 'MarkOT', sans-serif; font-size: 14px; margin-bottom: 14px; line-height: 2.28; } .content section main ul { padding-left: 0px; } .content section main ul li { padding-left: 60px; position: relative; } .content section main ul li:before { content: "•"; position: absolute; top: 0px; left: 45px; color: #ef4924; } .content section main ul + h2 { margin-top: 100px; } .content section main h1 { margin-bottom: 30px; } .content section main ol li { list-style-type: None; counter-increment: step-counter; position: relative; margin-bottom: 20px; max-width: 370px; } .content section main ol li:before { content: counter(step-counter); position: absolute; top: 0px; right: calc( 100% + 10px ); color: #ef4924; font-weight: bold; } h1.bigtitle { color: #ef4924; font-size: 30px; font-weight: bold; text-align: left; margin: auto; max-width: 1320px; overflow: hidden; margin-bottom: 30px; padding-left: 10px; padding-right: 10px; } h1.bigtitle:after { content:''; display:inline-block; width:100%; height:40px; margin-right:-100%; margin-left: 15px; border-bottom:1px solid #f1f2f2; position: relative; top: -8px; } .content section main time { text-indent: -50px; font-size: 11px; font-family: 'Sentinel', serif; font-weight: 100; font-style: italic; display: block; color: #25375d; } .content section main .or { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 460px; } .content section main .or a.cta { margin-left: 0px; margin-right: 0px; } .content section main .or em { font-style: italic; color: #25375d; font-family: 'Sentinel', serif; position: relative; top: 6px; } .content section main a.cta.left { display: flex; float: None!important; margin-left: 0px; } .content section aside { width: 38.2%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; position: relative; transition: all .25s; } .content section aside.vert-top { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .content section aside.vert-bottom { -webkit-flex-align: flex-end; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end; } .content section aside figure { } .content section aside figure img { max-width: 100%; position: relative; z-index: -1;} .content section aside figure a.cta { position: relative; top: -50px; } .content section aside a.cta.right { margin-right: 35px; margin-bottom: -25px; position: relative; z-index: 1; } .content section aside .bluebox { background: #25375d; text-align: left; color: #FFF; width: 385px; padding-left: 80px; padding-top: 42px; padding-bottom: 42px; margin-bottom: 0px; position: relative; } .content section aside .bluebox:after { content: ""; position: absolute; left: 100%; top: 0px; height: 100%; width: calc( 50vw - 514px ); display: block; background: #25375d; z-index: -1; } .content section aside .bluebox + * { margin-top: 100px; } .content section aside .bluebox article { width: 310px; margin: auto; } .content section aside .bluebox article p strong{ font-weight: bold } .content section aside .bluebox article p:last-child { margin-bottom: 50px; } .content section aside .bluebox article * { color: #FFF; } .content section aside .bluebox article a:hover { color: #ef4924; } .content section aside .bluebox a.cta { position: absolute; bottom: -30px; left: 80px; width: 160px; height: 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .content section aside .bluebox a.cta:hover { background: #6d6e71; } .content section aside .bluebox article h3 { font-size: 12px; margin-left: -30px; width: 140%; } .content section aside .bigbluebox { background: #25375d; text-align: left; color: #FFF; width: 385px; padding-left: 80px; padding-top: 42px; padding-bottom: 42px; margin-bottom: 100px; position: relative; } .content section aside .bigbluebox.extra { padding-top: 75px; padding-bottom: 75px; margin-top: 50px; margin-bottom: 0px; } .content section aside .bigbluebox:after { content: ""; position: absolute; left: 100%; top: 0px; height: 100%; width: calc( 50vw - 514px ); display: block; background: #25375d; z-index: -1; } .content section aside .bigbluebox article { width: 350px; margin: auto; } .content section aside .bigbluebox article p strong{ font-weight: 300; color: #ef4924; } .content section aside .bigbluebox article p:last-child { margin-bottom: 50px; } .content section aside .bigbluebox article * { color: #FFF; } .content section aside .bigbluebox.center article p a:hover, .content section aside .bigbluebox article a:hover { color: #ef4924 } .content section aside .bigbluebox a.cta { width: 160px; height: 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: 0px; } .content section aside .bigbluebox .bluebox-inner > a.cta { margin-left: auto; margin-right: auto; } .content section aside .bigbluebox a.cta:hover { background: #6d6e71; } .content section aside .bigbluebox.center { padding-bottom: 0px; } .bigbluebox a.cta:hover, .bluebox a.cta:hover { color: #FFF!important; } .content section aside .bigbluebox.center article { text-align: center; } .content section aside .bigbluebox.center article p strong { font-weight: bold; color: #FFF; } .content section aside .bigbluebox.center article p a { color: #FFF; text-decoration: None; } .content section aside .bigbluebox.center article a.cta { margin-left: auto; margin-right: auto; position: relative; top: 30px; } .content section aside .bigbluebox.center.bottom { padding-top: 0px; } .content section aside .bigbluebox.center.bottom article a.cta { top: -50px; } .content section aside .graybox:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0px; left: 0px; z-index: -1; background: #f7f8f9;} .content section aside .graybox:after { position: absolute; content: ""; width: calc( 50vw - 542px ); height: 100%; top: 0px; left: 100%; z-index: -1; background: #f7f8f9;} .content section aside .graybox { text-align: center; color: #FFF; width: 385px; padding-left: 80px; padding-top: 42px; padding-bottom: 42px; margin-bottom: 100px; position: relative; color: #25375d; line-height: 2; font-size: 14px; } .content section aside .graybox a { color: #25375d; font-weight: inherit; text-decoration: None; } .content section aside .graybox a:hover { color: #ef4924; } .content section aside .graybox a.cta { position: relative; top: -35px; color: #FFF; font-weight: bold; } .content section aside .graybox a.cta:hover { color: #FFF; background: #25375d; } .content section aside .graybox:after { content: ""; position: absolute; left: 100%; top: 0px; height: 100%; width: calc( 50vw - 514px ); display: block; background: #f7f8f9; z-index: -1; } .content section aside .graybox figure { position: static; float: right; width: 507px; height: auto; text-align: right; } .content section aside .graybox h3 { font-size: 12px; font-weight: bold; text-transform: uppercase; } .content section aside .graybox h4 { font-size: 14px; font-family: 'Sentinel', serif; text-transform: uppecase; } .content section aside .bigbluebox + cite { font-size: 10px; font-weight: 100; width: 350px; margin: 0px; float: right; display: block; text-align: right; margin-top: 20px; } .content section aside .graybox ul.list { float: left; list-style-type: None; padding-top: 14px; text-align: center; } .content section aside .graybox ul.list li { font-size: 28.87px; color: #25375d; font-weight: bold; letter-spacing: 0.3ex; text-transform: uppercase; } .content section aside .graybox ul.list li:after { content: "+"; color: #ef4924; display: block; } .content section aside .graybox ul.list li:last-child:after { display: None; } .content section main.full article, .content section main.full { width: 100%; max-width: 100%; } .content section aside .footnotes { background: var(--gray-shade); background: #f7f8f9; width: 385px; padding-left: 80px; padding-top: 42px; padding-bottom: 42px; margin-bottom: 100px; position: relative; text-align: right; font-size: 11.24px; font-weight: 100; color: #25375d; } .content section aside .footnotes cite { display: block; margin-bottom: 10px; } .content section aside .footnotes:after { content: ""; position: absolute; left: 100%; top: 0px; height: 100%; width: calc( 50vw - 514px ); display: block; background: var(--gray-shade); background: #f7f8f9; z-index: -1; } .content section aside .footnotes cite a { color: #ef4924; } .content section aside .footnotes cite a:hover { color: #25375d; } /* TIpbox */ .tipbox { margin: 80px 0px; } .tipbox section { position: relative; max-width: 820px; } .tipbox section .leftop { position: absolute; top: -50px; left: -50px; background: url(../images/topleft.svg) top center no-repeat; background-size: contain; width: 50px; height: 50px; display: block; } .tipbox section h4 { font-family: 'Sentinel', serif; font-size: 22px; font-style: italic; color: #ef4924; position: absolute; top: -40px; left: 0px; } .tipbox section figure img { max-width: 100% } /* Table */ #table section { max-width: 1050px; padding-left: 15px; padding-right: 15px; padding-bottom: 55px; position: relative; } #table section .backbox { position: absolute; top: 0px; left: -67px; width: 235px; height: calc( 100% + 50px ); } #table section table { border-collapse: collapse; font-family: 'MarkOT', sans-serif; font-size: 14px; color: #25375d; margin-left: 5px; } #table section table th, #table section table td { width: 20%; vertical-align: middle; min-height: 55px; text-align: center; border: .5px solid #d5d5d5; font-weight: 300; padding: 5px 15px; } #table section table.six th, #table section table.six td { width: 16%; } #table section table.four th, #table section table.four td { width: 25%; } #table section table.three th, #table section table.three td { width: 33.333%; } #table section table th { border-top: 0px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3ex; font-size: 12px; background: #FFF; } #table section table tbody tr:hover { background: #f1f2f2; } #table section table th:first-child, #table section table td:first-child { border-left: 0px; text-align: left; padding: 5px 15px; background: None; } #table section table th:last-child, #table section table td:last-child { border-right: 0px; } #table section table tbody tr:last-child td { border-bottom: 0px; } #table section table tbody tr:last-child td:last-child ul { padding-bottom: 50px; padding-left: 10px; } #table section table tbody ul { padding-left: 10px; } #table section table tbody ul li { text-align: left; font-size: 11px; margin-bottom: 5px; } #table section table tfoot td:first-child { padding-top: 80px; } #table section table tfoot td { border: None; } #table section table cite { font-size: 11px; font-style: italic; font-weight: 100; margin-bottom: 20px; display: block; position: relative; } #table section table cite:first-child:before { position: absolute; content: " "; top: 0px; right: 100%; text-align: right; } #table section table cite:nth-child(2):before { position: absolute; content: "** "; top: 0px; right: 100%; text-align: right; } #table section table cite:nth-child(3):before { position: absolute; content: "*** "; top: 0px; right: 100%; text-align: right; } #table section table cite:nth-child(4):before { position: absolute; content: "**** "; top: 0px; right: 100%; text-align: right; } #table section table cite:nth-child(5):before { position: absolute; content: "***** "; top: 0px; right: 100%; text-align: right; } #table section table cite:nth-child(6):before { position: absolute; content: "****** "; top: 0px; right: 100%; text-align: right; } #table section table cite a { color: #ef4924 } #table section table thead.tableFloatingHeaderOriginal[style*="position: fixed"]:before { position: absolute; bottom: 100%; left: 0px; width: 100%; height: 100px; background: #FFF; content : ""; display: block; } #table section table thead.tableFloatingHeaderOriginal[style*="position: fixed"] th { background: #FFF!important; } #table .contactbar { background: #25375d; color: #FFF; text-align: left; padding: 30px 25px; width: 50%; float: right; position: relative; top: -190px; } #table .contactbar:after { content: ""; position: absolute; top: 0px; left: 100%; height: 100%; width: calc( 50vw - 510px ); display: block; background: #25375d; z-index: -1; } #table .contactbar p { display: inline-block; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3ex; font-family: 'MarkOT', sans-serif; } #table .contactbar a.cta { position: absolute; top: -40%; white-space: nowrap; right: -50px; width: 160px; height: 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } .contactbar a.cta:hover, #table .contactbar a.cta:hover { background: #6d6e71 } #table .contactbar + .contactbar { color: #25375d; background: #FFF; clear: both; display: block; padding: 50px 25px; } #table .contactbar + .contactbar:after { display: None; } #table .contactbar + .contactbar a.cta { top: 30px; } a.cta em { font-style: normal; text-transform: None; } /* Cards Page */ .card-types section { max-width: 1250px; } .card-types section h2 { background: #25375d; color: #FFF; font-size: 30px; font-weight: bold; padding-left: 80px; height: 125px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; max-width: 530px; margin-bottom: 70px; } .card-types section h2 b { font-weight: bold; white-space: nowrap; margin-left: 15px; } .card-types section article { margin-left: 70px; border-left: 1px solid #f1f2f2; padding-left: 43px; } .card-types section .box-1-2 { padding: 0px; } .card-types section .box-1-2:first-child article { width: 430px } .card-types section .box-1-2:first-child h2:before { content:""; position: absolute; top: 0px; right: 100%; width: calc( 50vw - 625px ); display: block; height: 100%; background: #25375d; } .card-types section .box-1-2:last-child article { width: 510px; padding-right: 25px; } .card-types section .box-1-2:last-child h2 { width: 100%; max-width: 100%; } .card-types section .box-1-2:last-child h2:before { content:""; position: absolute; top: 0px; left: 100%; width: calc( 50vw - 625px ); display: block; height: 100%; background: #25375d; } .card-types section article h3 { color: #25375d; font-size: 16px; font-weight: bold; letter-spacing: 0.3ex; } .card-types section article ul, .card-types section article ul li { list-style-type: None; padding-left: 0px; } .card-types section article ul { margin-bottom: 60px; } #apply-bottom section { max-width: 1250px; padding-top: 50px; padding-bottom: 100px; } #apply-bottom .graybox { background: var(--gray-shade); background: #f7f8f9; width: calc( 100% - 475px ); position: relative; } #apply-bottom .graybox:before { background: var(--gray-shade); background: #f7f8f9; width: calc( 50vw - 625px ); position: absolute; top: 0px; right: 100%; height: 100%; content : ""; } #apply-bottom .graybox:after { background: var(--gray-shade); background: #f7f8f9; width: 25px; position: absolute; top: 0px; left: 100%; height: 100%; content : ""; z-index: -1; } #apply-bottom .graybox article { max-width: 475px; margin: 50px auto; color: #25375d; } #apply-bottom .graybox article * { color: #25375d; } #apply-bottom .graybox article h2 { font-size: 22px; font-weight: bold; letter-spacing: .3ex; text-transform: uppercase; margin-bottom: 20px; } #apply-bottom .graybox article ol { padding-left: 50px; list-style-type: None; } #apply-bottom .graybox article ol li { counter-increment: step-counter; position: relative; } #apply-bottom .graybox article ol li:before { content: counter(step-counter); color: #ef4924; font-weight: bold; position: absolute; top: 0px; left: -15px; } #apply-bottom .bluebox { background: #25375d; width: 475px; text-align: center; color: #FFF; height: 110px; padding-top: 35px; position: relative; } #apply-bottom .bluebox h2 { text-transform: uppercase; font-size: 22px; font-weight: bold; letter-spacing: .3ex; margin-bottom: 20px; } #apply-bottom .bluebox a.cta { width: 172px; height: 60px; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 0px; padding-right: 0px; margin: 0px 20px; } #apply-bottom .bluebox a.cta:hover { background: #6d6e71; } #apply-bottom .graybox article ol li address { padding-left: 50px; text-transform: uppercase; margin-top: 20px; } #apply-bottom .bluebox:after { position: absolute; top: 0px; left: 100%; width: calc( 50vw - 625px ); background: #25375d; content: ""; height: 100%; } /* Online Banking Page */ #tools-1 + .online-banking { position: relative; top: -20px; } .online-banking section { max-width: 1212px; padding: 0px 0px 0px 0px; } .online-banking main { width: calc( 100% - 430px ); position: relative; padding-top: 70px; float: left; padding-bottom: 100px; } .online-banking main .graybox { position: absolute; left: 50px; top: 0px; width: 296px; background: var(--gray-shade); background: #f7f8f9; z-index: -1; height: 100%; } .online-banking main article { max-width: 540px; margin: auto; font-size: 14px; } .online-banking main article * { font-size: 14px; } .online-banking main article h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .3ex; color: #25375d; } .online-banking main article ul { list-style-type: None; } .online-banking main article ul li { padding-left: 50px; position: relative; } .online-banking main article ul li:before { content: "•"; color: #ef4924; position: absolute; top: 0px; left: 35px; } .online-banking aside { width: 430px; text-align: center; float: right; padding-top: 120px; } .online-banking aside h3 { font-size: 22px; text-transform: uppercase; color: #ef4924; font-weight: bold; letter-spacing: .3ex; margin-bottom: 30px; } .online-banking aside .bluebox { color: #FFF; background: #25375d; padding: 50px; margin-bottom: 150px; position: relative; } .online-banking aside .bluebox h4 { color: #FFF; font-family: 'Sentinel', serif; font-style: italic; font-size: 19px; line-height: 1.75; margin-bottom: 30px; } .online-banking aside .bluebox ol { text-align: left; font-size: 14px; } .online-banking aside .bluebox ol li { font-weight: 100; margin-bottom: 20px; list-style-type: None; counter-increment: step-counter; position: relative; padding-left: 20px; } .online-banking aside .bluebox ol li a { color: #FFF; } .online-banking aside .bluebox ol li a:hover { color: gray; } .online-banking aside .bluebox ol li:before { content: counter(step-counter); position: absolute; top: 0px; left: 0px; font-weight: bold;} .online-banking aside .bluebox a.cta + ol { margin-top: 50px; } .online-banking aside .bluebox a.cta { width: 152px; padding-left: 0px; padding-right: 0px; } .online-banking aside .bluebox ol + a.cta { margin-bottom: -100px; position: relative; top: 50px; } .online-banking aside .bluebox:after { position: absolute; top: 0px; left: 100%; width: calc( 50vw - 606px ); height: 100%; content: ""; background: #25375d; } .online-banking aside .bluebox a.cta:hover { background: #6d6e71; } .mid-vid section { max-width: 1212px; position: relative; padding-top: 100px; } .mid-vid section .graybox { position: absolute; left: 50px; top: 0px; width: 296px; background: var(--gray-shade); background: #f7f8f9; z-index: -1; height: 100%; } .mid-vid section .inner-vid { max-width: 868px; margin: auto; position: relative; } .mid-vid section .inner-vid .toparrow { width: 50px; height: 50px; position: absolute; top: -50px; right: -50px; background: url(../images/top-right.svg) center no-repeat; background-size: contain; } .online-banking + hr { border-top: 1px solid #f1f2f2; max-width: 1160px; margin: 0px auto; } .online-banking + h1.bigtitle + .mid-vid { margin-top: -68px; } .online-banking .download { width: 450px; position: relative; margin: 20px 0px; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .online-banking .download h3:before { position: absolute; top: 0px; right: 100%; background-color: #ef4924; height: 100%; width: 50vw; content: ""; } .online-banking .download h3 { position: relative; font-size: 16px; font-weight: normal; background-color: #ef4924; color: #FFF; text-transform: uppercase; width: 270px; float: left; text-align: center; padding-top: 30px; padding-bottom: 30px; } .online-banking .download div { width: 162px; text-align: right; } .online-banking .download a.apps { width: 100%; text-align: center; margin: 10px 0px; } .online-banking .download a.apps svg { width: 100px; } #archive section { position: relative; max-width: 1084px; padding: 50px 30px; } #archive section .graybox { width: 295px; height: 511px; top: 0px; left: -50px; background: var(--gray-shade); background: #f7f8f9; z-index: -1; position: absolute; } #archive section .archive li { list-style-type: None; margin-bottom: 90px; } #archive section .archive li figure { width: 338px; float: left; } #archive section .archive li figure img { max-width: 100%; } #archive section .archive li div.post-details { float: right; width: calc( 100% - 380px ); float: right; } #archive section .archive li div.post-details h2.post-title { font-size: 18px; font-weight: bold; letter-spacing: 0.3ex; margin-bottom: 10px; } #archive section .archive li div.post-details h2.post-title a { font-weight: bold; color: #ef4924; text-decoration: None; } #archive section .archive li div.post-details h2.post-title a:hover { color: #25375d; } #archive section .archive li div.post-details p { font-size: 14px; font-weight: 300; color: #6d6e71; line-height: 2; margin-bottom: 14px; } #archive section .archive li div.post-details time { font-size: 14px; display: block; color: #b3b3b3; font-weight: 300; } #archive section .archive li:after { clear: both; display: block; content : ""; } /* About Us Page */ #about-1 section { max-width: 1200px; margin: 150px auto 150px; position: relative; } #about-1 section .backbox { background: var(--gray-shade); background: #f7f8f9; width: 232px; height: 135%; top: -10%; left: 10px; position: absolute; z-index: -2; } #about-1 section .biglist { width: 50%; float: left; } #about-1 section .biglist ul { list-style-type: None; text-align: center; margin-bottom: 100px; } #about-1 section .biglist ul li { font-size: 28.87px; color: #25375d; font-weight: bold; letter-spacing: 0.3ex; text-transform: uppercase; line-height: 1.68; } #about-1 section .biglist ul li:after { content: "+"; color: #ef4924; display: block; } #about-1 section .biglist ul li:last-child:after { display: None; } #about-1 section .biglist figure { max-width: 520px; position: relative; left: -80px; margin-bottom: 50px; } #about-1 section .biglist figure img { max-width: 100%; } #about-1 section aside { width: 50%; padding-left: 30px; float: left; } #about-1 section aside .bluebox { background: #25375d; padding: 60px 0px 0px;; position: relative; } #about-1 section aside .bluebox:after { background: #25375d; content:""; position: absolute; height: 100%; width: calc( 50vw - 600px ); top: 0px; left: 100%; } #about-1 section aside .bluebox article { float: right; max-width: 410px; color: #FFF; text-align: center; } #about-1 section aside .bluebox article h3 { color: #ef4924; font-size: 16px; font-weight: bold; margin-bottom: 50px; } #about-1 section aside .bluebox article p { color: #FFF; text-align: left; font-weight: 300; } #about-1 section aside .bluebox article p strong{ text-transform: uppercase; } #about-1 section aside .bluebox article p em { font-family: 'Sentinel', serif; font-style: italic; } #about-1 section aside .bluebox article a.cta { float: left; position: relative; top: 25px; } #about-1 section aside .bluebox article a.cta:hover { background: #6d6e71; } #about-1 section aside .bluebox .blueboxinner:after { clear: both; display: block; content : ""; } .content.about { margin-bottom: 0px; } .content.about section { max-width: 1200px; padding-right: 0px; } .content.about main { width: 50%; } .content.about main a.cta { margin-left: auto; float: left; background: #25375d; } .content.about main a.cta:hover { background: #ef4924; } .content.about aside { float: right; } .content.about aside .bigorangebox { background: #ef4924; color: #FFF; position: relative; top: -150px; width: 100%; padding: 80px 30px; padding-right: 0px; } .content.about aside .bigorangebox:after { content: ""; background: #ef4924; position: absolute; top: 0px; left: 100%; height: 100%; width: calc( 50vw - 512px ); } .content.about aside .bigorangebox article { color: #FFF; text-align: right; } .content.about aside .bigorangebox article a { color: #FFF; text-decoration: None; } .content.about aside .bigorangebox article a:hover { color: #25375d; } .content.about aside .bigorangebox article p { color: #FFF; } .content.about aside .bigorangebox article p strong { text-transform: uppercase; letter-spacing: .5ex; } /* Careers */ #careers-1 section { max-width: 1200px; position: relative; padding: 100px 0px; } #careers-1 section .backbox { background: var(--gray-shade); background: #f7f8f9; position: absolute; top: 0px; left: 10px; width: 230px; height: 100%; z-index: -2; } #careers-1 section .biglist { width: 50%; float: left; padding: 50px 0px; } #careers-1 section .biglist ul { list-style-type: None; padding-left: 20px; max-width: 300px; text-align: center; } #careers-1 section .biglist ul li { font-size: 29px; color: #25375d; text-transform: uppercase; font-weight: bold; letter-spacing: 0.3ex; line-height: 1.68; } #careers-1 section .biglist ul li:after { content: "+"; color: #ef4924; display: block; } #careers-1 section .biglist ul li:last-child:after { display: None; } #careers-1 section .bluebox { width: calc( 50% - 50px ); float: right; background: #25375d; color: #FFF; padding: 50px 0px 50px 50px; color: #FFF; position: relative;} #careers-1 section .bluebox article { float: right; color: #FFF; text-align: right; } #careers-1 section .bluebox:after { content: ""; position: absolute; background: #25375d; top: 0px; left: 100%; width: calc( 50vw - 600px ); height: 100%; z-index; -2; } #careers-1 section .bluebox article h2 { text-transform: uppercase; letter-spacing: 0.3ex; font-size: 16px; margin-bottom: 16px; } #careers-1 section .bluebox article * { color: #FFF; } .alternating { margin-bottom: 50px; } .alternating article h2 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.2ex; } .alternating article p { margin-bottom: 18px; } .alternating article { padding: 30px; } .alternating article ul li:before { color: #ef4924; content: "•"; position: absolute; top: 0px; left: -10px;} .alternating article ul li { list-style-type: None; position: relative; } .alternating figure { max-width: 512px; margin-top: 75px; } .alternating figure img { max-width: 100%; } .alternating figure a.cta { margin: 10px auto; display: flex; width: 180px; text-align: center; padding-left: 10px; padding-right: 10px; position: relative; top: -45px; } /* Site Map */ #tree > ul { display: block!important; } #tree > ul li { display: block!important; } #tree > ul > li { font-size: 16px; padding-left: 0px; margin-bottom: 20px; } #tree > ul > li > a { font-weight: bold; color: #25375d; letter-spacing: .5ex; text-decoration: None; } #tree > ul > li > ul > li { padding-left: 70px; } #tree > ul > li > ul > li > a { font-size: 14px; text-decoration: None; } #tree > ul > li > ul > li > ul { padding-left: 0px; } #tree > ul > li > ul > li > ul > li { padding-left: 20px; } #tree > ul > li > ul > li > ul > li > a { color: #6d6e71; text-decoration: None; } #tree .collapsed:before { content: "+"; color: #ef4924; font-weight: bold; top: -8px; position: relative; } #tree .expanded:before { content: "-"; color: #ef4924; font-weight: bold; top: -8px; position: relative; } #tree li { position: relative; } #tree li .expanded, #tree li .collapsed { width: 100%; height: 30px; position: absolute; top: 0px; left; 0px; } .toolhover { position: relative; color: #ef4924; } .toolhover .tooltip { visibility: hidden; width: 180px; background-color: #ef4924; font-family: 'Sentinel', serif; padding: 20px; color: #fff; text-align: left; border-radius: 0px; position: absolute; z-index: 3; bottom: 105%; left: 0%; margin-left: 0px; transition: all .25s ease-in; font-size: 12px; line-height: 18px; font-style: italic; } .toolhover .tooltip:after { position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #ef4924 transparent transparent transparent; content : ""; } .toolhover.hover .tooltip, .toolhover:hover .tooltip { visibility: visible; } #apply-bottom article cite, #table article cite { font-size: 12px; font-style: italic; display: block; margin-top: 20px; } #apply-bottom article cite a, #table article cite a { color: #ef4924!important; } #apply-bottom article cite a:hover, #table article cite a:hover { color: #25375d!important; } .alertbox { max-width: 535px; background-color: #FFF; color: #25375d;; text-align: left; border-radius: 0px; position: absolute; z-index: 3; margin-left: 0px; transition: all .25s ease-in; font-size: 12px; line-height: 18px; font-style: italic; position: fixed; bottom: 50%; right: 50%; transform: translateX(50%) translateY(50%); z-index: 99; } .alertbox #cancel2 { color: #25375d; font-weight: bold; position: absolute; top: 25px; right: 25px; text-decoration: none; font-size: 24px; } .alert-inner { padding: 100px 60px 50px; display: block; text-align: center; font-size: 14px; } .alert-inner p { font-size: 14px; margin-bottom: 40px; line-height: 2; } .alert-inner h3 { font-size: 21px; text-transform: uppercase; color: #ef4924; font-weight: bold; letter-spacing: .3ex; margin-bottom: 30px;} .alert-inner a.cta { display: flex; margin: 20px auto 5px; } .alert-inner em, .alert-inner a.cta + a:not(.cta) { color: #ef4924; text-decoration: none; font-family: 'Sentinel', serif; font-style: italic; } .blackout { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background: rgba(0,0,0,.35); z-index: 98; } /* Digital Tools Page */ .tools section { max-width: 1000px; } .tools .gray { background: var(--gray-shade); background: #f7f8f9; padding: 60px 18px; position: relative; float: left; } .tools .gray:after { background: var(--gray-shade); background: #f7f8f9; position: absolute; top: 0px; height: 100%; z-index: -1; content: ""; } .tools .gray:before { background: var(--gray-shade); background: #f7f8f9; position: absolute; top: 0px; height: 100%; z-index: -1; content: ""; } .tools .blue { width: 411px; background: #25375d; text-align: center; color: #FFF; max-height: 248px; } .tools .blue-inner { padding: 48px 0px; } .tools .blue-inner h4 { text-transform: uppercase; font-weight: bold; font-size: 14px; letter-spacing: 0.165ex; } .tools .blue-inner a.cta { width: 150px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 60px; margin: 20px auto; position: relative; top: 45px; padding-left: 5px; padding-right: 5px; } .tools .blue-inner a.cta:hover { background: #6d6e71; } .tools figure { float: left; position: relative; } .tools figure .inner-pic { width: 100%; } .tools figure .inner-pic img { max-width: 100%; } .tools article h2 { margin-bottom: -2px; line-height: 1.08; margin-bottom: 15px; } .tools article h3 { font-family: 'Sentinel', serif; color: #25375d; font-style: italic; text-transform: None; letter-spacing: 0px; font-size: 20px; } .tools article ul { padding-left: 52px; line-height: 1.5; list-style-type: None; column-gap: 50px; -webkit-column-gap: 50px; margin-top: 60px; } .tools article ul li { line-height: 1.5; padding-left: 15px; margin-bottom: 23px; position: relative; } .tools article ul li:before { position: absolute; top: 0px; left: 4px; content: "•"; color: #ef4924; } #tools-1 { margin-top: 100px; } #tools-1 .gray { max-width: 700px; float: right; } #tools-1 .gray:before { left: 100%; width: calc( 50vw - 500px ); } #tools-1 .gray:after { right: 100%; width: 75px; } #tools-1.tools article { max-width: 700px; } #tools-1.tools article + a.cta { float: right; position: relative; margin: 35px 75px; } #tools-1.tools figure { width: calc( 100% - 700px ); float: left; } #tools-2.tools { margin-top: 0px; } #tools-2.tools .gray { float: left; max-width: 545px; padding-top: 50px; position: relative; } #tools-2.tools .gray .downright { position: absolute; bottom: -50px; left: -50px; background: url(../images/bottomright.svg) center no-repeat; background-size: contain; width: 50px; height: 50px; } #tools-2.tools .gray:before { width: calc( 50vw - 500px ); right: 100%; } #tools-2.tools .gray:after { left: 100%; width: 100px;; } #tools-2.tools .blue { position: relative; top: 120px; float: right; margin-right: 0px; } #tools-3 section { padding: 203px 0px; } #tools-3.tools figure { width: calc( 100% - 470px ); top: -30px; position: relative; padding-right: 50px; } #tools-3.tools figure .inner-pic { } #tools-3.tools figure .inner-pic img { max-width: 100%; } #tools-3.tools figure .downleft { position: absolute; bottom: -50px; left: -50px; background: url(../images/bottomright.svg) center no-repeat; background-size: contain; width: 50px; height: 50px; } #tools-3 section .gray { float: left; width: 470px; } #tools-3 section .gray:before { width: 330px; right: 100%; } #tools-3 section .gray:after { width: 55px; left: 100%; } #tools-4 section { } #tools-4 section figure { width: 50% } #tools-4 section article { width: 434px; float: left; } #tools-4 .contactbar { background: #25375d; color: #FFF; text-align: left; padding: 30px 25px; width: 50%; float: right; position: relative; top: 50px; } #tools-4 .contactbar:after { content: ""; position: absolute; top: 0px; left: 100%; height: 100%; width: calc( 50vw - 510px ); display: block; background: #25375d; z-index: -1; } #tools-4 .contactbar p { display: inline-block; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3ex; font-family: 'MarkOT', sans-serif; } #tools-4 .contactbar a.cta { position: absolute; top: -40%; white-space: nowrap; right: -50px; width: 160px; height: 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .contactbar p { max-width: 350px; } #tools-5 section { padding: 165px 0px; } #tools-5 section .gray { width: 50%; } #tools-5 section .gray:before { width: calc( 50vw - 500px ); right: 100%; } #tools-5 section .gray:after { width: 267px; left: 100%; } #tools-5 section .gray article { max-width: 340px } #tools-5 section .gray article a.cta { position: relative; margin: auto; display: flex; max-width: 200px; text-align: center; top: 90px; } #tools-5 section figure { width: 50%; padding-top: 50px; } #tools-6.tools { margin-top: 80px; margin-bottom: 300px; } #tools-6.tools .gray { float: right; max-width: 545px; padding-top: 50px; width: 100%; position: relative; } #tools-6.tools .gray .downright { position: absolute; bottom: -50px; right: -50px; background: url(../images/bottomleft.svg) center no-repeat; background-size: contain; width: 50px; height: 50px; } #tools-6.tools .gray article { width: 400px; } #tools-6.tools .gray:before { right: 100%; width: 100px;; } #tools-6.tools .blue { position: relative; top: 120px; } /* Why Page */ #why-1 section, #why-2 section, #why-3 section { max-width: 1110px; } #why-1 section .wisdom { width: calc( 50% + 70px ); float: left; position: relative; } #why-1 section .wisdom .graybox { position: absolute; width: 296px; background: var(--gray-shade); background: #f7f8f9; height: calc( 100% + 250px ); top: -250px; left: 50px; z-index: -1; } #why-1 section .wisdom figure { width: 50%; float: left; } #why-1 section .wisdom figure .pic-inner img { max-width: 565px; width: 465px; float: right; top: -30px; left: -50px; position: relative; } #why-1 section .wisdom ul { width: 50%; float: left; list-style-type: None; padding-top: 64px; } #why-1 section .wisdom ul li { font-size: 28.87px; color: #25375d; font-weight: bold; letter-spacing: 0.3ex; text-align: center; } #why-1 section .wisdom ul li:after { content: "+"; color: #ef4924; display: block; } #why-1 section .wisdom ul li:last-child:after { display: None; } #why-1 section .bluebox { width: calc( 50% - 70px ); float: left; color: #FFF; background: #25375d; padding: 95px 0px 95px 95px; position: relative; } #why-1 section .bluebox:after { background: #25375d; content: ""; top: 0px; left: 100%; height: 100%; position: absolute; width: calc( 50vw - 555px ); } #why-1 section .bluebox article, #why-1 section .bluebox article p { color: #FFF; } #why-1 section .bluebox article h2 { color: #FFF; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5ex; margin-bottom: 30px; } #why-1 section .bluebox article cite { color: #FFF; text-align: right; display: block; font-style: italic; font-family: 'Sentinel', serif; margin-top: 50px; } #why-2 section { padding: 150px 0px; } #why-2 section figure img { max-width: 100%; } #why-2 section .box-1-2 { padding: 0px } #why-2 section article h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.5ex; margin-bottom: 30px; } #why-3 section { padding: 0px 0px 0px; margin-bottom: 100px; } #why-3 section .buttons { width: 312px; float: left; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding-right: 40px; } #why-3 section .buttons a.cta { width: 152px; text-align: center; margin: 11px 0px; padding-left: 5px; padding-right: 5px; } #why-3 section .buttons a.cta { width: 152px; text-align: center; margin: 11px 0px; padding-left: 5px; padding-right: 5px; } #why-3 section .moneywise { width: calc( 100% - 312px ); float: left; position: relative; } #why-3 section .moneywise > h2 { font-size: 26px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.3ex; color: #25375d; margin-bottom: 60px; } #why-3 section .moneywise article { padding-left: 56px; max-width: 575px; width: 100%; } #why-3 section .moneywise article h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.5ex; margin-bottom: 30px; margin-top: 60px; } #why-3 section .moneywise .graybox { position: absolute; width: 460px; background: var(--gray-shade); background: #f7f8f9; height: calc( 100% + 100px ); top: -50px; left: -150px; z-index: -1; } aside .moneywise { font-size: 26px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.3ex; color: #25375d; margin: 100px 30px 0px; display: block; } aside .moneywise em { font-style: normal; color: #ef4924; font-weight: bold; } aside .moneywise:after { display: block; clear: both; content : ""; margin-top: 50px; } aside .moneywise.large { font-size: 35px; margin: 0px; } /* Calculators Page */ .calculators { position: relative; } .calculators section { max-width: 1122px; padding: 70px 0px; position: relative; } .calculators section:after { right: 45px; width: 2px; content: ""; height: 120%; top: -20%; background: var(--gray-shade); background: #f7f8f9; position: absolute; } .calculators section .graybox { max-width: 710px; width: 100%; padding: 25px 25px 50px 25px; background: var(--gray-shade); background: #f7f8f9; position: relative; float: left; } .calculators section .graybox:before { content: ""; position: absolute; top: 0px; right: 100%; background: var(--gray-shade); background: #f7f8f9; z-index: -1; height: 100%; width: calc( 50vw - 566px ); } .calculators section .graybox:after { content: ""; position: absolute; top: 0px; left: 100%; background: var(--gray-shade); background: #f7f8f9; z-index: -1; height: 100%; width: 50px; } .calculators section .graybox article h1 { margin-bottom: 30px; color: #ef4924; margin-top: -55px; letter-spacing: 0px!important; } .calculators section .graybox article h2 { margin-bottom: 10px; margin-top: 30px; } .calculators section .graybox article h2 a { font-weight: bold; color: #25375d; text-decoration: None; } .calculators section .graybox article h2 a:hover{ color: #ef4924; opacity: 1; } .calculators section .graybox article ul { padding-left: 40px; list-style-type: None; column-gap: 50px; -webkit-column-gap: 50px; } .calculators section .graybox article ul li { position: relative; page-break-inside: avoid; break-inside: avoid; margin-bottom: 30px; color: #25375d; font-weight: bold; text-transform: uppercase; font-size: 16px; letter-spacing: 0.3ex; } .calculators section .graybox article ul li h4 a { color: #25375d; font-weight: bold; text-transform: None; } .calculators section .button-holder { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .calculators section .button-holder a.cta { width: 150px; padding-left: 0px; padding-right: 0px; height: 52px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } .calc-bottom section { max-width: 1122px; padding: 70px 0px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .calc-bottom section > article { width: 50%; float: left; padding: 15px; } .calc-bottom section > article p { font-style: italic; font-family: 'Sentinel', serif; } .calc-bottom section .notice { width: 450px; float: right; } .calc-bottom section .notice .bluebox { width: 367px; background: #25375d; color: #FFF; text-align: right; padding: 60px 0px; position: relative; padding-right: 0px; float: right; } .calc-bottom section .notice .bluebox:before { position: absolute; bottom: 100%; right: 100%; transform: rotate(-90deg); content: "NOTICE"; color: #ef4924; font-size: 22px; font-weight: bold; letter-spacing: 0.3ex; width: 100%; height: 40px; text-align: center; transform-origin: bottom right; } .calc-bottom section .notice .bluebox:after { content: ""; background: #25375d; position: absolute; top: 0px; left: 100%; height: 100%; width: calc( 50vw - 566px ); } .calc-bottom section .notice .bluebox article { width: 265px; color: #FFF; text-align: left; display: inline-block; } .calc-bottom section .notice .bluebox article p { color: #FFF; font-size: 14px; font-weight: 100; } .bigbluebox a:hover , .bluebox a:hover { color: #ef4924; opacity: 1; } .card-right { margin-top: 60px; margin-bottom: 100px; } .card-right section { max-width: 970px; } .card-right section article { background: #f1f2f2; padding-top: 65px; padding-bottom: 50px; width: calc( 100% - 355px ); float: left; position: relative; } .card-right section article h2 { line-height: 1; margin-bottom: 30px } .card-right section article ul { padding-left: 45px; max-width: 485px; } .card-right section article ul li { line-height: 1.5; margin-bottom: 20px; } .card-right section article a.cta { margin-bottom: -50px; position: relative; top: 25px; margin-right: 60px; } .card-right section article:before { content: ""; background: #f1f2f2; position: absolute; top: 0px; left: calc( ( 50vw - 485px ) * -1 ); width: calc( 50vw + 268px ); height: 100%; z-index: -1; } .card-right section figure { width: 355px; float: right; padding-top: 75px; } .card-right .blue-bar { background: #25375d; width: calc( ( 50vw - 485px ) + 548px ); text-align: right; color: #FFF; padding: 50px 65px 50px 0px;; font-size: 16px; text-transform: uppercase; font-family: 'MarkOT'; letter-spacing: 0.1ex; } .card-left { margin-top: 60px; margin-bottom: 100px; } .card-left section { max-width: 970px; } .card-left section article { background: #f1f2f2; padding-top: 65px; padding-bottom: 50px; width: calc( 100% - 355px ); float: right; position: relative; max-width: 535px; } .card-left section article h2 { line-height: 1; margin-bottom: 30px; } .card-left section article ul { padding-left: 45px; max-width: 415px; width: 100%; } .card-left section article ul.twocol { max-width: 530px; } .card-left section article ul li { line-height: 1.5; margin-bottom: 20px; } .card-left section article a.cta { margin-bottom: -50px; position: relative; top: 25px; margin-right: 60px; } .card-left section article:before { content: ""; background: #f1f2f2; position: absolute; top: 0px; right: calc( ( 50vw - 485px ) * -1 ); width: calc( 50vw + 268px ); height: 100%; z-index: -1; } .card-left section figure { width: 355px; float: left; padding-top: 100px; } .citations section { max-width: 1017px; margin-bottom: 100px; font-family: 'MarkOT'; font-weight: 200; font-style: italic; } .citations section h5 { text-align: center; font-family: 'MarkOT'; font-weight: 200; font-style: italic; font-size: 10px; margin-bottom: 20px;} .citations section ol li { font-family: 'MarkOT'; font-weight: 200; font-style: italic; font-size: 10px; margin-bottom: 10px; } sup { font-size: small; } /* Financial Planning */ #planning section { position: relative; max-width: 1056px; padding: 75px 0px 0px; } #planning section .graybox { position: absolute; background: var(--gray-shade); background: #f7f8f9; width: 233px; top: 0px; left: -63px; height: 100%; z-index: -1; } #planning + .content section { padding-top: 0px; } #planning section figure, #planning section .biglist { width: 50%; float: left; } #planning section .biglist ul { list-style-type: None; padding-left: 20px; max-width: 300px; text-align: center; } #planning section .biglist ul li { font-size: 29px; color: #25375d; text-transform: uppercase; font-weight: bold; letter-spacing: 0.3ex; line-height: 1.68; } #planning section .biglist ul li:after { content: "+"; color: #ef4924; display: block; } #planning section .biglist ul li:last-child:after { display: None; } #content.content.retirement figure { width: 100%; } #content.content.retirement figure, #planning section figure { text-align: right; position: relative; max-width: 100%; } #planning section figure .pic-container img { max-width: 100%; } #content.content.retirement figure a.cta, #planning section figure a.cta { margin-right: 50px; position: relative; top: -55px; margin-bottom: 20px; width: 160px; height: 60px; } #content.content.retirement.trusts figure a.cta { margin-right: 30px; } #planning section figure a.cta { top: -37px; } #content.content.retirement section { padding-bottom: 5 0px; } #content.content.retirement { margin-bottom: 0px; } #content.content.retirement .graybox, #planning + #content.content .graybox { position: absolute; background: var(--gray-shade); background: #f7f8f9; width: 233px; top: 0px; left: -50px; height: 100%; z-index: -1; } #planning + #content.content .bigbluebox.center { margin-bottom: 0px; } #content.content.retirement .bigbluebox.center article, #planning + #content.content .bigbluebox.center article { width: 360px; padding: 65px 0px; } #content.content.retirement .bigbluebox.center article *, #planning + #content.content .bigbluebox.center article * { margin-bottom: 5px; } .cta-container.trusts { margin-top: 160px; } .cta-container.trusts, #content.content.retirement .cta-container { width: 320px; text-align: center } .cta-container.trusts h2, #content.content.retirement .cta-container h2 { font-size: 30px; font-weight: bold; letter-spacing: 0.2ex; } .content h2.money-wise { font-size: 30px; font-weight: bold; letter-spacing: 0.2ex; text-align: center;} .content.retirement section aside .bigbluebox.center { margin-bottom: 0px; padding-top: 0px; } .content.retirement + .content.retirement { margin-bottom: 100px!important; } .content.retirement main.item h1 { font-size: 48.77px; text-transform: uppercase; color: #25375d; letter-spacing: 0.3ex; margin-bottom: 0px; margin-top: 80px;; } /* Wealth Management */ #wealth section { max-width: 1172px; padding: 0px; } #wealth .bluebox { position: relative; background: #25375d; margin-top: 62px; width: 285px; padding: 55px 0px 65px; color: #FFF; float: left; text-align: center; } #wealth .bluebox:before { position: absolute; top: 0px; right: 100%; height: 100%; content: ""; z-index: -1; background: #25375d; width: calc( 50vw - 586px ); } #wealth .bluebox:after { position: absolute; top: 0px; left: 100%; height: 100%; content: ""; z-index: 1; background: #25375d; width: 75px } #wealth .bluebox h2 { color: #FFF; font-size: 23.5px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.3ex; margin-bottom: 50px; } #wealth .bluebox a.cta { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 152px; height: 52px; margin-bottom: 20px; } #wealth .bluebox a.cta:hover { background: #6d6e71 } #wealth .graybox { position: relative; background: var(--gray-shade); background: #f7f8f9; width: calc( 100% - 285px ); text-align: right; padding: 65px 0px; float: left; } #wealth .graybox:after { position: absolute; background: var(--gray-shade); background: #f7f8f9; left: 100%; top: 0px; height: 100%; width: calc( 50vw - 586px ); content: ""; } #wealth .graybox article { text-align: right; margin-right: 85px; float: right; max-width: 545px; margin-top: 18px; } #wealth .graybox article h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.3ex; } #wealth + .content.retirement { position: relative; top: -60px; } #wealth + .content.retirement section { padding-top: 0px; } #wealth + .content.retirement aside { padding-top: 0px; } #wealth + .content.retirement aside a.cta { position: relative; top: 25px; left: 60px; z-index: 1; } .content#content aside a.cta:hover { background: #6d6e71 } /* Contact Page */ #contact-form { margin-top: 100px; margin-bottom: 100px; } #contact-form section { max-width: 1028px; background: var(--gray-shade); background: #f7f8f9; position: relative; padding: 50px; text-align: center; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } #contact-form section .bottomarrow { width: 50px; height: 50px; position: absolute; bottom: -50px; right: -50px; background: url(../images/bottomarrow.svg) center no-repeat; background-size: contain; } #contact-form section address { width: 235px; display: inline-block; text-align: left; font-size: 13px; font-weight: 100; color: #25375d; line-height: 2; } #contact-form section address h2 { color: #ef4924;font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3ex; margin-bottom: 20px; } #contact-form section address h3 { font-weight: bold; font-size: 13px; text-transform: uppercase; margin: 10px 0px; } #contact-form section address a { color: #25375d; text-decoration: None; font-weight: 100; } #contact-form section address a:hover { color: #ef4924; } #contact-form section form { display: inline-block; width: 400px; margin-left: 100px; font-size: 0px; } #contact-form section form input[type=text], #contact-form section form input[type=tel], #contact-form section form input[type=email], #contact-form section form textarea { height: 55px; max-width: 100%; width: calc( 100% - 22px ); border: 1px solid #a3aeb7; margin: 11px; font-size: 11px; color: #25375d; padding-left: 20px; resize: None; } #contact-form section form textarea { height: 200px; } #contact-form section form textarea:after { content: ""; clear: both; display: block; } #contact-form section form input[type=email] { width: 208px; } #contact-form section form input[type=tel] { width: 145px; } #contact-form section form input[type=submit] { position: relative; float: right; border: None; background: #ef4924; color: #FFF; text-decoration: None; top: -35px; right: 50px; width: 85px; height: 45px; font-size: 10px; letter-spacing: 0.3ex; cursor: pointer; padding-top: 18px; } #contact-form section form input[type=submit]:hover { background: #25375d; ]} #contact-form section form ::-webkit-input-placeholder { color: #6d6e71; text-transform: uppercase } #contact-form section form ::-moz-placeholder { color: #6d6e71; text-transform: uppercase; } #contact-form section form :-ms-input-placeholder { color: #6d6e71; text-transform: uppercase; } #contact-form section form :-moz-placeholder { color: #6d6e71; text-transform: uppercase; } #contact-2 .bluebox { position: relative; } #contact-2 .bluebox-inner { text-align: right; font-size: 15px; position: static; } #contact-2 .bluebox-inner p, #contact-2 .bluebox-inner address, #contact-2 .bluebox-inner p a { font-weight: 100; color: #FFF; line-height: 2; } #contact-2 .bluebox-inner address h3 { font-size: 13.67px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3ex; } #contact-2 .bluebox-inner address em { font-family: 'Sentinel', serif; font-style: italic; font-size: 16px; letter-spacing: 0.1ex; } #contact-2 .bluebox-inner a.cta { position: absolute; top: 50%; bottom: auto; left: 0px; transform: translateX( -50%) translateY( -50%); padding-left: 15px; padding-right: 15px; } .content section aside .bigbluebox.center article a.cta { padding-left: 15px; padding-right: 15px; } #contact-3 .graybox { position: relative; padding-left: 60px; width: 450px; } #contact-3 .graybox-inner { text-align: right; font-size: 15px; position: static; } #contact-3 .graybox-inner p, #contact-2 .graybox-inner address, #contact-3 .graybox-inner a { font-weight: 100; color: #FFF; line-height: 2; color: #25375d; text-decoration: None; } #contact-3 .graybox-inner a:hover { color: #ef4924 } #contact-3 .graybox-inner address h3 { font-size: 13.67px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3ex; } #contact-3 .graybox-inner address em { font-family: 'Sentinel', serif; font-style: italic; letter-spacing: 0.1ex; } #contact-3 .graybox-inner address strong { font-weight: bold; text-transform: uppercase; margin-right: 5px; } .leadership h2 { margin-bottom: 5px; line-height: 1; } .leadership.content section main p { margin-bottom: 5px; line-height: 1.75; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } @-moz-document url-prefix() { .leadership.content section main div { margin-top: 35px; } } .leadership.content section main div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .leadership p + h2 { margin-top: 35px; } .leadership.content .backbox { top: -115px; height: calc( 100% + 120px ) } .vidcover { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; cursor: pointer; } .key-results { clear: both; display: block; } /* Mortgage Page */ #mortgage-bio { margin-top: 68px; } #mortgage-bio section { max-width: 1020px; } #mortgage-bio section figure.box-1-2 { padding: 65px 0px 65px 45px; position: relative; } #mortgage-bio section figure.box-1-2:before { position: absolute; right: 240px; height: 100%; content: ""; background: #25375d; width: 50vw; z-index: -1; top: 0px; } #mortgage-bio section figure.box-1-2 img { max-width: 295px; height: auto; } #mortgage-bio section div.box-1-2 { padding-left: 0px; } #mortgage-bio section article { text-align: right; } #mortgage-bio section article h3 { text-transform: uppercase; font-size: 14px; font-weight: 600; color: #25375d; margin-top: 40px; } #mortgage-bio section article h4 { font-family: 'Sentinel', serif; font-style: italic; color: #25375d; font-size: 14px; } #mortgage-bio + hr { margin: 75px auto; max-width: 1160px; border: none; border-top: 1px solid #f1f2f2; } #mortgage-easy section { max-width: 736px; background: #25375d; color: #FFF; text-align: center; } #mortgage-easy { margin-bottom: 100px; } #mortgage-easy article { max-width: 495px; margin: 90px auto 50px; padding-bottom: 80px; padding-top: 90px; } #mortgage-easy article h2 { color: #FFF; text-transform: uppercase; font-size: 30px; letter-spacing: 0.5ex; } #mortgage-easy article h3 { font-size: 12px; letter-spacing: 0.5ex; margin-bottom: 40px; } #mortgage-easy article p { color: #FFF; font-size: 14px; margin-bottom: 20px; } #mortgage-easy article a.cta { margin-bottom: 20px; } #mortgage-easy article a.cta:hover { background: #f7f8f9; color: #25375d } /* Footer Settings */ #page-foot { background: #25375d; } #page-foot section { padding: 35px 0px; } #page-foot .social, #page-foot address { display: inline-block; } #page-foot .social { font-size: 0px; margin-top: -2px; margin-left: 85px; } #page-foot .social li a { color: #869eae; background-color: #FFF; width: 35.5px; height: 35.5px; font-size: 14px; padding: 11px 11px 11px 12px; margin: 0px 25px; transition: all .25s;} #page-foot .social li.fb a { padding-left: 14px; } #page-foot .social li a:hover { background: #ef4924; color: #FFF; } #page-foot nav#footer-nav { display: inline-block; } #page-foot nav#footer-nav ul, #page-foot nav#footer-nav ul li { display: inline-block; list-style-type: None; } #page-foot nav#footer-nav ul li.fb a { padding-left: 15px; } #page-foot nav#footer-nav ul li a { font-weight: 300; color: #FFF; font-size: 12px; letter-spacing: .4ex; text-decoration: None; margin: 0px 20px; } #page-foot nav#footer-nav ul li a:hover { color: #ef4924; } #page-foot section img { width: auto; height: 50px; margin-right: 55px; position: relative; margin-bottom: -49px; } #page-foot cite { } @media handheld, only screen and (max-width: 1370px) and (min-width: 1024px) { /* Under the grid width to iPad Landscape */ #header-image .bxslider li .typetext h1 { font-size: 40px; } #header-image .bx-pager { left: 30px; } #searchform { max-width: 225px } #page-foot .social { margin-left: 25px; } #page-foot nav#footer-nav ul li a { margin: 0px 12px; } .content article h1, #top-intro section main > h2 { margin-left: -20px; } .content.indent main h2 { text-indent: -20px; } #home-accounts section .needs li > a { right: -30px!important;} #tools-4 .contactbar a.cta, #table .contactbar a.cta { right: -15px; } .content section aside .graybox:after, .calc-bottom section .notice .bluebox:after, .content section aside .bigbluebox:after, .content section aside .bluebox:after { width: 30px; } #why-1 section .bluebox, .content section aside .bigbluebox, .content section aside .bigbluebox.extra { padding-left: 20px; } .card-types section .box-1-2:last-child article { width: auto; } #home-accounts section .locations { padding-right: 15px; padding-top: 80px; } #header-image ul.bxslider li { max-width: calc( 100vw - 335px ) } #why-2 section .box-1-2 { padding: 15px; } #careers-1 section .bluebox, #about-1 section aside .bluebox article { padding-right: 25px; } aside .moneywise.large { font-size: 33px; } #contact-2 .bluebox-inner a.cta { left: 20px; } #contact-3 .graybox { width: 100%; } } @media handheld, only screen and (max-width: 1363px) and (min-width: 767px) { #header-image .slider { width: calc( 100% - 335px ); } #header-image .bxslider li { width: calc( 100% - 335px ) } #header-image ul.bxslider li article { max-width: 100%; padding-left: 70px; padding-right: 50px; } #header-image ul.bxslider li article h1 { font-size: 48px; } #header-image ul.bxslider li > div { margin-left: 0px; } #header-image .login-form { margin-right: 0px; } } @media handheld, only screen and (max-width: 1140px) and (min-width: 1024px) { #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul { left: -10px; width: calc( 100% + 20px ) } #header .text-box h1 { font-size: 48px; } #page-head hgroup #nav #main > li.menu-item-has-children > ul > li > a { font-size: 10px; } #why-1 section .bluebox { padding-left: 15px; padding-right: 15px; } .content.about aside .bigorangebox { padding-right: 30px; } #alert-bar section { padding-left: 15px; padding-right: 15px; } } @media handheld, only screen and (max-width: 1023px) and (min-width: 767px) { /* Smaller tablets to iPad portrait */ #alert-bar { padding: 5px; } #alert-bar section { padding-left: 5px; padding-right: 5px; } #header-image { margin-bottom: 0px; } #header-image .bx-pager { left: 20px; } #header-image ul.bxslider li { max-width: calc( 100vw - 335px ) } #header-image ul.bxslider li article h1 br { display: none; } #header-image .disclaimer { font-size: 16px; } #header-image .bxslider li .typetext h1 { font-size: 26px; } #searchform { max-width: 260px } #page-head hgroup .logo { margin-left: 45px; } #page-head hgroup .logo:hover { margin-left: 15px; } #page-head hgroup #nav { margin-right: 65px; width: calc( 100% - 180px); } #page-head hgroup #nav #main > li > a { font-size: 10px; } #page-foot .social { margin-left: 18px; } #page-foot nav#footer-nav ul li a { margin: 0px 8px; font-size: 10px; } #page-foot .social li a { margin: 0px 12px; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul li a { font-size: 12px; } #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul { left: -5px; width: calc( 100% + 10px ) } #page-head hgroup #nav #main > li.menu-item-has-children > ul > li > a { font-size: 9px; } #page-foot section img { height: 40px; margin-right: 40px; margin-bottom: 0px; } #home-accounts section .locations { left: -60px; width: calc( 100% + 15px ); padding: 50px 25px; } #home-accounts section .needs li { padding: 50px; } #searchform { max-width: 175px; } #searchform input[type=search] { height: 40px; } .online-banking main, .content section main { padding-right: 15px; } .online-banking section { padding-left: 15px; padding-right: 15px; } article h1, .h1 { font-size: 33px; } .online-banking .download { width: 100%; display: block; } .content article h1, #top-intro section main > h2 { margin-left: -20px; } .content.indent main h2 { text-indent: -20px; } #home-accounts section .needs li > a { right: -30px!important;} #tools-4 .contactbar a.cta, #table .contactbar a.cta { right: -15px; } #table .contactbar:after { width: 15px; } #wealth .graybox article { margin-right: 20px; padding-left: 20px; } .card-types section article { margin-left: 0px; padding-left: 20px; width: auto!important;; } .content section aside .bluebox { width: 100%; } .content section aside .bigbluebox, .content section aside .bigbluebox.extra, .content section aside .bluebox { padding-left: 20px; } .content section aside .bluebox article h3 { margin-left: 0px; width: 100%; } .content section aside .bigbluebox article, .content section aside .bigbluebox, .content section aside .bluebox article { width: 100%; } #why-2 section .box-1-2, #why-1 section .bluebox { padding-left: 15px; padding-right: 15px; } #wealth .bluebox:after, #wealth .bluebox:before { display: None!important; } #table .contactbar p { width: calc( 100% - 120px ) } #wealth + .content.retirement main { width: calc( 100% - 360px) } #wealth + .content.retirement aside { width: 360px; } .content.retirement main.item h1 { font-size: 31px; } #careers-1 section .bluebox, .calculators section { padding-left: 15px; padding-right: 15px; } .calculators section .button-holder { width: 200px; } .calculators section .graybox { width: calc( 100% - 200px ); } #content.content.retirement .bigbluebox.center article, #planning + #content.content .bigbluebox.center article, #content.content .bigbluebox.center article { width: 100%; } .content section aside .graybox figure { width: 100%; } aside .moneywise.large { font-size: 25px; } #about-1 section aside .bluebox { padding: 30px 15px; } #contact-form section form input[type=email] { width: 178px; } #contact-2 .bluebox-inner a.cta { position: static; transform: None; } #contact-3 .graybox { width: 100%; font-size: 12px; } #contact-3 .graybox-inner { font-size: 12px; } #tools-6.tools .gray, .tools .blue, #tools-4 section article, .tools figure, .tools .gray { width: 50%; } .content section main .or { width: 90%; } .content section aside .graybox:after, .calc-bottom section .notice .bluebox:after, .content section aside .bigbluebox:after, .content section aside .bluebox:after { width: 30px; } #searchform button { width: 40px; height: 40px; } #mapz section #map-locations li address { font-size: 11px; } #mapz section #map-locations li.active address { height: 90px; } #mapz section .map-links { top: 10px; } #hours section .container input:checked ~ label { margin-right: 80%; } #holidays section input[type=checkbox]:checked ~ label { margin-right: 70px; } #holidays section #tabs dl dt { font-size: 11px; } #page-foot section img { height: 33px; } .card-left section article, .card-right section article { padding-left: 30px; padding-right: 30px; } .card-right .blue-bar { width: 530px; } .citations section { padding-left: 15px!important; padding-right: 15px!important; } } @media handheld, only screen (max-width: 1300px) and (min-width: 1200px) and (max-height: 730px) and (min-height: 600px) { #header-image .login-form .login-inner iframe { height: 250px!important; } } @media handheld, only screen and (max-width: 766px) { /* Mobile */ :root { --gray-shade: #DDDDDD!important; } #alert-bar { padding: 5px; height: 325px; } #alert-bar section { padding-left: 15px; padding-right: 15px; display: block; } #alert-bar article { padding: 0px!important; line-height: 1.5; } #alert-bar section a.cta { margin: 20px auto 0px; display: flex; } .home #alert-bar + #page-head { top: 325px; } .home #alert-bar + #page-head.navfixed { top: 0px; } /* Mobile Menu styles */ .home #page-head { top: -100px; transition: top .25s; } .home #page-head.mobdown { top: 0px; position: fixed!important; } .home > .smoothscroll { display: None; } .home #page-head.navfixed, #page-head, #page-head { border-bottom-color: #25375d; border-bottom-width: 1px; border-bottom-style: solid; } .home #page-head.navfixed, #page-head, #page-head, #page-head hgroup { height: 65px; } #page-head hgroup .logo { height: 25px; width: 25px; margin: 20px 25px } #page-head hgroup .toggle { position: absolute; top: 24px; margin: 0px; right: 15px; width: 18px; height: 15px; } #page-head hgroup .toggle:before, #page-head hgroup .toggle:after, #page-head hgroup .toggle span:before, #page-head hgroup .toggle span:after { background: #25375d; height: 1.15px; } #page-head hgroup #nav { background: #25375d; margin: 0px; width: 100%; } #page-head hgroup #nav #main { margin: 0px; width: 100%; padding-bottom: 85px; } #page-head hgroup #nav #main li a { padding: 20px; color: #FFF; } #page-head hgroup #nav #main li ul { } #page-head hgroup #nav #main li ul li a { } #page-head hgroup #nav #main > li.menu-item-has-grand-children > a:after { content: "+"; font-weight: 100; margin-left: 5px; } #page-head hgroup #nav #main > li.menu-item-has-grand-children > a.minus:after { content: "-"; font-weight: 100; margin-left: 5px; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul { background: #FFF; } #page-head hgroup #nav #main li.menu-item-has-children > a:after { content: "+"; font-weight: 100; margin-left: 5px; display: inline-block; } #page-head hgroup #nav #main li.menu-item-has-children > a.minus:after { content: "-"; font-weight: 100; margin-left: 5px; display: inline-block; } .home #page-head hgroup #nav #main > li.menu-item-has-children a + ul.expand { padding-top: 25px!important; } #page-head hgroup #nav #main .current-menu-item a, #page-head hgroup #nav #main .active a, #page-head hgroup #nav #main a:hover { color: #FFF; } .cta { padding-left: 10px; padding-right: 10px; text-align: center; } .content .backbox { width: 145px; top: -50px; } #table section .backbox { width: 162px; } #page-head hgroup #nav #main > li.menu-item-has-grand-children.active > a:before, #page-head hgroup #nav #main > .menu-item-has-grand-children.current-menu-item > a:before, #page-head hgroup #nav #main > .menu-item-has-grand-children.active > a:before, #page-head hgroup #nav #main > li.menu-item-has-grand-children:hover > a:before, #page-head hgroup #nav #main > li.menu-item-has-grand-children > a:hover:before { display: None!important; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul { position: static; width: 100%; padding-left: 0px; } #page-head hgroup #nav #main > .menu-item-has-grand-children > ul li a { padding-right: 25px; font-family: 'MarkOT', sans-serif; font-size: 12px; text-transform: capitalize; letter-spacing: 0.3ex; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul li a { text-align: right; color: #000; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul { background: transparent; width: 100%; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } #page-head hgroup #nav #main .menu-item-has-grand-children .menu-item-has-children ul.expand { max-height: 1000%; } #page-head hgroup #nav #main > li.menu-item-has-children:hover a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul.expand, #page-head hgroup #nav #main > li.menu-item-has-children a:hover + ul { padding-top: 25px!important; } #page-head hgroup #nav #main > li > a:before { display: none!important; } #page-head hgroup #nav #main > li.menu-item-has-children:hover a + ul, #page-head hgroup #nav #main > li.menu-item-has-children.active a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a:hover + ul { padding-top: 0px; padding-bottom: 0px; } #page-head hgroup #nav #main > li.menu-item-has-children > ul > li > a { text-align: right; padding-right: 25px; } #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul { width: 100%; left: 0px; } aside .moneywise { margin-top: 50px; } #header-image { height: auto!important; margin-bottom: 50px; } #header-image section { padding: 0px; } #header-image ul.bxslider li > div, #header-image ul.bxslider li, #header-image ul.bxslider li div.full-height, #header-image .slider { height: calc( 50vh - 40px )!important; } #header-image ul.bxslider li > div { margin-left: 0px; } #header-image ul.bxslider li.mobilecreep { background-position: center 65px!important } #header-image .login-form { min-height: calc( 50vh - 40px )!important; height: auto; } #header-image .login-form, #header-image .slider { width: 100%!important; float: None!important; } #header-image .bxslider li svg.enn { width: 100%; left: 10%; animation: 5s linear 0s 1 resize-too; } #header-image ul.bxslider li div.vert-center { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #header-image .disclaimer { bottom: 10px; font-size: 14px; } #header-image .bxslider li .typetext { display: None!important; } #header-image ul.bxslider li article { padding-left: 25px; padding-right: 25px; } #header-image ul.bxslider li article h1 { font-size: 24px; } #header-image ul.bxslider li article span { display: None; } .home #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head.down hgroup #nav #main > li.menu-item-has-children a + ul, #page-head hgroup #nav #main > li.menu-item-has-children a + ul { width: 100%!important; } #header-image ul.bxslider li article a span { display: block; } @keyframes resize-too{ 0% { width: 85%; left: -10px; } 90% { width: 85%; left: -10px; } 100%{ width: 100%; left: 10% } } #header-image .bxslider li .typetext { display: None; } #header-image .bx-pager { left: 18px; padding-top: 0px; } #header-image .bx-pager a { width: 1.7px; height: 28px; } #header-image .bx-next { width: 50px; height: 38px; bottom: -19px; right: 15px; background-size: 15px 30px; } #header-image .login-form .login-inner { padding-top: 35px; padding-bottom: 35px; height: auto; } #header-image .login-form .login-inner #logo-long { max-width: 180px; margin-bottom: 10px; } #header-image .login-form .login-inner form { padding: 0px 10px; } #header .text-box, #header figure, #header.short .text-box, #header.short figure { padding-bottom: 0px; } #home-intro section { padding-bottom: 50px!important; } #home-intro section figure .mobile-pic { display: block; max-width: 100%; height: auto; } #home-intro section figure .desktop-pic { display: None; } #home-intro section .intro-copy { padding-top: 0px; padding-left: 50px; } #home-intro section .intro-copy p { display: None; } #home-intro section .intro-copy a.cta { margin: 0px; position: relative; right: -50%; } article h1, .h1 { font-size: 24px; } article h2, .h2 { font-size: 19px; } article h5, .h5 { font-size: 12px; } #home-intro section .intro-copy h2 { margin-bottom: 20px; } #home-vid section .vid .corner { display: None; } #home-vid section { padding: 0px; } #home-vid section .vid { width: 100%; } #home-vid section .vid:before, #home-vid section .bx-controls { display: None; } #home-accounts section { padding: 50px 0px 10px 0px; } #home-accounts section .needs { right: 0px; top: 0px; } #home-accounts .box-1-2.right { padding: 0px; padding-left: 80px } #home-accounts .box-1-2.left article { display: None; } #home-accounts section .needs li { margin: 0px; padding: 40px 60px; height: 136px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #home-accounts section .needs li:nth-child(2) { background: #FFF; } #home-accounts section .needs li h5.h5 a { color: #25375d; } #home-accounts section .needs li > a { display: None; } #home-accounts section .needs li figure { width: 55px; height: 55px; left: -27px; } #home-accounts section .needs li p { display: None; } #home-accounts section .locations { max-width: 100%; left: 0px; padding: 15px; margin-top: 0px; width: 100%; background: transparent; text-align: center; } #home-accounts section .locations h3.h3 { margin-bottom: 0px; padding: 15px 25px; font-size: 12px; text-align: center; background: #ef4924; display: inline-block; max-width: 160px; } #home-accounts section .needs li h5 { margin-bottom: 0px; } #home-accounts section .locations a.cta-2 { display: None; } #home-accounts section .locations input + #locations div { height: auto!important; } #home-accounts section .locations ul { background: #ef4924; font-size: 8px; width: 100%; margin: 10px auto; padding: 5px; text-align: left; } #home-accounts section .locations ul li { margin-bottom: 12px } h1.bigtitle { font-size: 24px; padding-left: 15px; } /* Other Pages */ #hours section .container, #header figure, #header .text-box { width: 100%; display: block; float: None; padding: 0px 15px; } #header figure { padding-bottom: 0%; } #hours section .container { padding-top: 15px; padding-bottom: 15px; padding-left: 0px; padding-right: 0px; } #hours section { padding-bottom: 0px; } #hours section .container input:checked ~ label { margin-right: 83%; } #mapz section { padding: 0px; text-align: center; padding-bottom: 20px; } #mapz section .map-locations { width: 100%; float: None; } #mapz section #map { width: calc( 100% - 30px ); float: None; margin-left: 15px; margin-bottom: 30px; height: 350px; } #mapz section .map-links { margin: 0px 20px 20px; } .online-banking { padding-left: 15px; padding-right: 15px; } #holidays section #tabs { padding: 30px 15px; } #holidays section #tabs .side { width: 100%; float: None; } #holidays section #tabs .main { width: 100%; padding: 15px 0px; } #holidays section input[type=checkbox]:checked + div { height: 565px; } #holidays section label { margin-right: 0px; margin-left: 20px; } #holidays section input[type=checkbox]:checked ~ label { margin-right: 80px; } #header .backbox { width: 100%; left: 0px; } #top-intro section { padding-top: 25px!important; } #top-intro section main, #top-intro section aside, .content main, .content aside { width: 100%!important;; float: None!important; display: block!important; } .tools .gray, .tools .blue, .calculators section .button-holder, #tools-4 .contactbar, #header .text-box, #header figure, #archive section .archive li div.post-details, #header.short .text-box, #header.short figure { width: 100%!important; float: None!important; } .calculators section .button-holder { padding-left: 25px; padding-right: 25px; text-align: right; display: block; } .calculators section .button-holder a.cta { } #holidays section input[type=checkbox]:checked ~ .hdays { height: auto; } .calc-bottom section, .online-banking .download { display: block; width: 100%; } .calc-bottom section .notice .bluebox { width: 100%; padding: 15px; margin-bottom: 50px; } #archive section .archive li figure, .calc-bottom section .notice { width: 100%; } .online-banking main { padding-bottom: 0px; } .online-banking aside { padding-top: 40px; } #tools-1.tools article + a.cta { margin: 35px auto; } #tools-2.tools .blue { position: static; } #tools-4 .contactbar a.cta { right: -15px; } #tools-5 section { padding: 55px 0px; } #top-intro.content section aside { height: auto!important; margin-bottom: 0px; } #top-intro.content section aside .aside-inner { position: static!important; } #top-intro section { display: block!important; } #home-intro section .intro-copy .backbox { top: -12.66117px!important; width: 296px; height: 96%; top: 25%; left: -20px; } #home-accounts section .locations .corner, #mapz section:before, #page-foot #searchform { display: None; } #home-vid { margin-bottom: 35px; } #table section table.four th, #table section table.four td, #table section table.six th, #table section table.six td, #table section table, #table section table tbody, #table section table tbody td { display: block; width: 100%; border-width: .5px!important; height: auto; padding-top: 5px; padding-bottom: 5px; min-height: 55px; } #table section table thead { display: None; } #table section table td:first-child { border-left: .5px solid #d5d5d5!important; text-align: center; font-weight: bold; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #table section table td:first-child:before { display: None; } #table section table tbody td { padding: 0px!important; } #table section table tbody td:before { border: .5px solid #d5d5d5!important; border-left: 0px!important; display: block; content: attr(data-head); width: 100%; font-weight: bold; color: #25375d; background: #f7f8f9; padding-top: 5px; padding-bottom: 5px; } #table section table { width: calc( 100% - 100px ); margin-left: 50px; } #table section table td:last-child { border-right: .5px solid #d5d5d5!important; } #table section table tbody tr { margin-bottom: 20px; display: block; } #table section table tfoot { width: 100%; display: block; } #table section table tfoot tr { border: None!important; } #table section table td:first-child { border: None!important; } #table section table td:first-child * { font-weight: bold; } #table section table td:first-child cite { font-weight: 300; } #table section table tfoot td:first-child { padding-top: 0px; text-align: left!important; } #table section table tfoot td { width: 100%; display: block; height: auto; border: None!important; border-left: None!important; } #table section table tbody tr:last-child td { border-bottom: 1px solid #d5d5d5!important; } #table section table td.hide { display: None!important; } #table .contactbar a.cta { top: auto; bottom: -60%; right: auto; left: 50%; transform: translateX(-50%) } #table .contactbar + .contactbar { background: transparent; } #table .contactbar + .contactbar a.cta { top: 100px; } #top-intro.content section aside .aside-inner.topbutton { top: 0px; margin-bottom: 0px; } #table .contactbar { width: 100%; top: auto!important; margin-top: 50px; margin-bottom: 75px; } .content section aside .bluebox article h3, .content article h1, #top-intro section main > h2 { margin-left: 0px; } .content.indent main h2 { text-indent: 0px; } #header { margin-top: 100px; margin-bottom: 50px; } #header section { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #header section figure { order: 1; -webkit-order: 1; } #header section .text-box { order: 2; -webkit-order: 2; } #header .text-box article { padding: 0px 25px!important; } #header .text-box article:before { width: 100vw; left: -16px } .content { margin: 50px 0px; } .online-banking aside .bluebox, .content section main { margin-bottom: 50px; } .online-banking main .graybox { left: -200px; } article ul, main ul { padding-left: 0px; } .online-banking + h1.bigtitle + .mid-vid { margin-top: 0px; } .mid-vid section { padding-left: 25px!important; padding-right: 25px!important; } #header.short + #top-intro section main > h2, .content main article, article { padding-left: 50px!important; padding-right: 50px!important; text-align: left!important; } .content article h1 { font-size: 22px; } section { padding: 0px; } .content section main .or { display: block ;text-align: center; } .content section main .or a.cta { width: 100%; margin: 20px auto; } .content section aside .bluebox a.cta { left: 50%; transform: translateX(-50%) } .content section aside .footnotes { width: 100%; padding: 15px; } .content section aside .bigbluebox, .content section aside .bigbluebox.extra, .content section aside .bluebox { width: 100%!important; padding: 30px 15px; } #apply-bottom .bluebox a.cta { margin-top: 10px; } #top-intro section main, #top-intro section aside { min-height: 0px; } .mid-vid section .inner-vid .toparrow, .online-banking .download h3:before { display: None; } .online-banking .download h3 { width: 100%; font-size: 12px; padding-left: 10px; padding-right: 10px; } .tools article ul { padding-left: 0px; } .online-banking .download div { width: 100%; } .online-banking .download a.apps { width: 100%; display: block; text-align: center; margin: 10px auto; } .online-banking .download a.apps svg { width: 150px; height: auto; margin: auto; display: block; } .tools .blue { margin-bottom: 50px; } .vert-center, .alternating > *, #contact-form section, .vert-bottom { display: block; } .card-types section article { margin-left: 0px; } #hours section .container a.cta, #hours section .container label { display: block; float: None; margin: auto; width: 160px; } #planning section .graybox { left: -150px; top: -40px; } #planning section .biglist ul { padding-left: 0px; width: 100%; max-width: 100%; margin-bottom: 40px; margin-top: 40px; } .card-types section h2 { font-size: 24px; padding-left: 25px; padding-right: 25px; } #careers-1 section .biglist ul { max-width: 100%; } #planning section .graybox, #planning section .biglist, #planning section figure, #planning section .biglist, #about-1 section .biglist, #about-1 section aside, #wealth .bluebox, #wealth .graybox, #contact-form section address, #contact-form section form, #careers-1 section .biglist, #careers-1 section .bluebox, #tools-4 section figure, #why-1 section .wisdom figure, #why-1 section .wisdom ul, #why-1 section .bluebox, #why-1 section .wisdom, #why-1 section .wisdom figure .pic-inner img, #why-3 section .buttons, #why-3 section .moneywise, .online-banking main, .online-banking aside, #apply-bottom .graybox, .content section aside .graybox figure, .content section aside .graybox + cite, .trusts, #content.content.retirement .cta-container, #tools-5 section figure, .content section aside .graybox, #apply-bottom .bluebox { width: 100%; float: None; display: block; } #mapz section { padding-bottom: 100px; } #holidays { margin-bottom: 100px; } .alternating figure { margin-top: 0px; } .content section aside .bluebox article h3 { width: 100%; } #content.content.retirement figure a.cta, #planning section figure a.cta { margin-right: 0px; top: -35px; left: -50%; transform: translateX(50%) } #tools-5 section figure, #contact-form section form, #contact-form section address, #tools-4 section figure { padding-left: 25px; padding-right: 25px; } #contact-form section address { padding-top: 50px; padding-bottom:50px; } #about-1 section .biglist figure { left: 0px; } .cta-container.trusts, #content.content.retirement .cta-container { margin-bottom: 20px; margin-top: 20px; } #tools-4 .contactbar a.cta { top: auto; bottom: -40%; left: 50%; transform: translateX(-50%); } ul.archive { padding-left: 50px; padding-right:50px; padding-top: 25px; } #tools-4 .contactbar { top: 0px; margin-bottom: 50px; } #about-1 section aside { padding-left: 0px; } .cta-container.trusts, #content.content.retirement .cta-container { margin-bottom: 20px; } .cta-container.trusts h2, #content.content.retirement .cta-container h2 { font-size: 24px; } #contact-form section { margin-left: 0px; } #apply-bottom .graybox { padding-top: 25px; padding-bottom: 25px; } #why-1 section .wisdom ul { padding-top: 0px; padding-bottom: 30px; } main.full article { margin-bottom: 50px; } #about-1 section aside .bluebox article p { text-align: left; } #about-1 section { margin-bottom: 50px; } #wealth .bluebox article { text-align: center!important; } .content.about main a.cta { float: None; } #why-1 section .wisdom figure { margin-left: -250px; float: left; } #why-1 section .wisdom figure .pic-inner img { left: 0px; } #why-1 section .wisdom ul, #why-1 section .wisdom .graybox { margin-bottom: 50px; } #why-3 section .moneywise > h2 { margin-left: 50px; } #why-3 section .buttons { padding-right: 0px; margin-bottom: 35px; } #why-3 section .buttons a.cta { margin: 10px auto; display: flex; } #contact-form section .bottomarrow { display: None; } #apply-bottom { margin-bottom: 150px; } .content section aside .bigbluebox.center article a.cta { top: -0px!important; margin-bottom: 30px; } .content section aside .bigbluebox.center { padding-bottom: 10px; } .content section aside .bigbluebox.center.bottom { margin-top: 75px; padding-bottom: 15px; } .mobilehide { display: none!important; margin-bottom: 0px!important; } #table .contactbar + .contactbar { margin-top: 0px; } .content section main ul li { padding-left: 30px; } .content section main ul li:before { left: 15px; } .content section main a.cta.left { margin: 10px auto; } .tipbox { margin: 75px 25px; } #apply-bottom .graybox:after, .tipbox section .leftop, #header .text-box article:after, .content h2 br { display: None; } .calculators section .graybox { padding: 20px 0px 50px; margin: 25px 0px; } #why-2 section, #wealth section, .content section aside .graybox, #about-1 section aside .bluebox article, #careers-1 section .bluebox, #why-3 section, #why-1 section .bluebox { padding: 30px 15px; } #contact-form section form { margin-left: 0px; } #contact-2 .bluebox-inner a.cta { position: static; transform: None; } #contact-3 .graybox { width: 100%; } #contact-form section form input[type=text], #contact-form section form input[type=tel], #contact-form section form input[type=email], #contact-form section form textarea { width: 100%; margin: 10px 0px; } #contact-3 .graybox-inner { font-size: 10px; } .content .backbox { top: -40px!important; } .content.about aside .bigorangebox { top: 0px; } .content section main time { text-indent: 50px; } aside .moneywise.large { font-size: 23px; } #page-foot .social { float: left; margin-left: 0px; margin-top: 7px; } .content.retirement main.item h1 { font-size: 22px; text-align: center; } #wealth + .content.retirement aside a.cta { left: 0px; top: 0px; margin-bottom: 25px; } .content section aside .footnotes { margin-top: 50px; margin-bottom: 0px; background: transparent; } #page-foot .social li.fb a { padding-left: 7px; } #page-foot .social li { display: block; width: 80px; margin-bottom: 30px; margin-right: 0px; } #page-foot .social li a { width: 25px; height: 25px; margin-bottom: 10px; font-size: 25px; background: None; color: #FFF; padding: 0px; margin-left: auto; margin-right: auto; display: block; } #page-foot nav#footer-nav { display: inline-block; float: left; width: calc( 100% - 155px ); padding-left: 0px; padding-top: 10px; } #page-foot nav#footer-nav li { display: block!important; margin: 0px; padding: 0px; padding-left: 25px; } #page-foot section { padding-bottom: 10px!important; padding-top: 30px!important; padding-left: 15px!important; padding-right: 15px!important; } .content section aside .graybox { margin-top: 0px; padding-top: 0px!important; } .content section aside .graybox ul.list { margin-top: 20px; width: 100%; } .content section aside .graybox:before { display: None; } #header.short.faq .text-box h1 { white-space: normal; } #page-foot nav#footer-nav ul li a { margin-left: 0px; display: block; margin: 0px; margin-bottom: 15px; font-size: 10px; } #page-foot section img { float: right!important; margin-right: 13px; margin-left: 15px; height: 33px; margin-bottom: 20px; } #tools-4 .contactbar p { text-align: center; } #table .contactbar p { text-align: center; margin-bottom: 20px; } .alert-inner { padding: 50px 30px 30px; } .alert-inner p { font-size: 10px; } .citations section { padding-left: 15px!important; padding-right: 15px!important; } .card-left section article { width: 100%; max-width: 100%; } .card-left section figure { width: 100%; max-width: 100%; text-align: center; } .card-left section figure img { max-width: 100%; } #mortgage-easy section { max-width: 736px; background: #25375d; color: #FFF; text-align: center; padding: 35px 0px; } #mortgage-easy { margin-bottom: 100px; text-align: center; } #mortgage-easy article { max-width: 495px; margin: 90px auto 50px; padding-bottom: 80px; padding-top: 90px; text-align: center!important; } #mortgage-easy article h2 { color: #FFF; text-transform: uppercase; font-size: 22px; letter-spacing: 0.5ex; } #mortgage-easy article h3 { font-size: 10px; letter-spacing: 0.5ex; margin-bottom: 40px; } #mortgage-easy article p { color: #FFF; font-size: 12px; margin-bottom: 20px; text-align: center; } #mortgage-easy article a.cta { margin-left: auto; margin-right: auto; } #mortgage-easy article a.cta { margin-bottom: 20px; } .card-right section article { width: 100%; } .card-right section figure { width: 100%; max-width: 100%; text-align: center; padding-top: 30px; padding-bottom: 30px; } .card-right section figure img { max-width: 100%; } .card-right .blue-bar { width: 100%; text-align: center; padding-left: 15px; padding-right: 15px; } #header-image ul.bxslider li.new-header > div article a.cta + span { float: none; width: 100%; clear: both; } }