/*---------- RESET ----------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent }
article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block; margin: 0 }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }
input, textarea { border-radius: 0 }
input { -webkit-appearance: none }
body { -webkit-text-size-adjust: none }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
:focus { outline: 0 }
::-moz-focus-inner { border: 0 }
ins { text-decoration: none }
del { text-decoration: line-through }
table { border-collapse: collapse; border-spacing: 0 }
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
::-moz-selection { background: #000000; color: #fff; }
::selection { background: #000000; color: #fff; }
input[type="checkbox"] { -webkit-appearance: checkbox; }
input[type="radio"] { -webkit-appearance: radio; }
/*---------- FONTS ----------*/
@font-face { font-family: 'zwo'; src: url('../fonts/zwo-alt-lf-w-1-webfont.woff2') format('woff2'), url('../fonts/zwo-alt-lf-w-1-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'zwo'; src: url('../fonts/zwo-alt-lf-w-3-webfont.woff2') format('woff2'), url('../fonts/zwo-alt-lf-w-3-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'zwo'; src: url('../fonts/zwo-alt-lf-w-6-webfont.woff2') format('woff2'), url('../fonts/zwo-alt-lf-w-6-webfont.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }
/*---------- ICONS ----------*/
@font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot'); src: url('../fonts/icomoon.eot#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.woff') format('woff'), url('../images/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }
[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-our-customer-promise:before{content:"\e900"}
.icon-our-mission:before{content:"\e901"}
.icon-our-purpose:before{content:"\e902"}
.icon-our-vision:before{content:"\e903"}
.icon-countries:before{content:"\e904"}
.icon-employees:before{content:"\e905"}
.icon-history:before{content:"\e906"}
.icon-location:before{content:"\e907"}
.icon-management:before{content:"\e908"}
.icon-search:before{content:"\e909"}
.icon-weather:before{content:"\e90a"}
.icon-chevron-up:before{content:"\e90b"}
.icon-about-us:before{content:"\e90c"}
.icon-bod:before{content:"\e90d"}
.icon-branches:before{content:"\e90e"}
.icon-careers:before{content:"\e90f"}
.icon-linkedin:before{content:"\e910"}
.icon-twitter:before{content:"\e911"}
.icon-instagram:before{content:"\e912"}
.icon-facebook:before{content:"\e913"}
.icon-arrow_forward:before{content:"\e914"}
.icon-arrow_back:before{content:"\e915"}
.icon-menu:before{content:"\e916"}
.icon-close:before{content:"\e917"}
.icon-chevron-down:before{content:"\e918"}
.icon-whatsapp:before{content:"\e919"}
.icon-download:before{content:"\e91a"}
.icon-share:before{content:"\e91b"}
.icon-arrow-right:before{content:"\e91c"}
.icon-phone:before{content:"\e91d"}
.icon-pin:before{content:"\e91e"}
.icon-email:before{content:"\e91f"}
.icon-clock:before{content:"\e920"}
.icon-rates:before{content:"\e921"}
.icon-digital-banking:before{content:"\e922"}
.icon-get-loan:before{content:"\e923"}
.icon-get-card:before{content:"\e924"}
.icon-save-invest:before{content:"\e925"}
.icon-open-account:before{content:"\e926"}
.icon-save-money:before{content:"\e927"}
.icon-internet-banking:before{content:"\e928"}
.icon-current-accounts:before{content:"\e929"}
.icon-fixed-deposit:before{content:"\e92a"}
.icon-transactional-accounts:before{content:"\e92b"}
.icon-tarrifs:before{content:"\e92c"}
.icon-support:before{content:"\e92d"}
.icon-atms:before{content:"\e92e"}
.icon-diaspora:before{content:"\e92f"}
.icon-agents:before{content:"\e930"}
.icon-phone-filled:before{content:"\e931"}
.icon-email-filled:before{content:"\e932"}
.icon-check-mark:before{content:"\e933"}
.icon-youtube:before{content:"\e934"}
.icon-deposit:before{content:"\e935"}
.icon-transaction:before{content:"\e936"}
.icon-accounting:before{content:"\e937"}
.icon-debit-card:before{content:"\e938"}
.icon-joint-account:before{content:"\e939"}
.icon-24-hours:before{content:"\e93a"}
.icon-money-transfer:before{content:"\e93b"}
.icon-cheque:before{content:"\e93c"}
.icon-income:before{content:"\e93d"}
.icon-piggy-bank:before{content:"\e93e"}
.icon-assets:before{content:"\e93f"}
.icon-point-of-service:before{content:"\e940"}
.icon-payment:before{content:"\e941"}
.icon-forex:before{content:"\e942"}
.icon-investment-insurance:before{content:"\e943"}
.icon-online-appointment:before{content:"\e944"}
.icon-customer-service:before{content:"\e945"}
.icon-loan:before{content:"\e946"}
.icon-index:before{content:"\e947"}
.icon-money:before{content:"\e948"}
.icon-save-money1:before{content:"\e949"}
.icon-solution:before{content:"\e94a"}
.icon-crm:before{content:"\e94b"}
.icon-banking:before{content:"\e94c"}
.icon-mobile-money:before{content:"\e94d"}
.icon-online-banking:before{content:"\e94e"}
.icon-vehicle-price:before{content:"\e94f"}
.icon-vehicle-location:before{content:"\e950"}
.icon-vehicle-mileage:before{content:"\e951"}
.icon-vehicle-transmission:before{content:"\e952"}
.icon-vehicle-body:before{content:"\e953"}
.icon-vehicle-colour:before{content:"\e954"}
.icon-vehicle-fuel:before{content:"\e955"}
.icon-vehicle-year:before{content:"\e956"}
.icon-fullscreen:before{content:"\e957"}
.icon-about-assets:before{content:"\e958"}
.icon-about-branches:before{content:"\e959"}
.icon-about-customers:before{content:"\e95a"}
.icon-about-employees:before{content:"\e95b"}
.icon-about-mission:before{content:"\e95c"}
.icon-about-purpose:before{content:"\e95d"}
.icon-about-social:before{content:"\e95e"}
.icon-about-vision:before{content:"\e95f"}
.icon-ethics:before{content:"\e960"}
.icon-mailbox-filled:before{content:"\e961"}
.icon-school-fees:before{content:"\e962"}
/*---------- GENERAL STYLES ----------*/
html, body { height: 100%; }
body { color: #707070; background-color: #fff; font-family: 'zwo', sans-serif; }
h1, h2, h3, h4 { font-weight: normal; }
a { color: #0B8040; text-decoration: none; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
p { margin-bottom: 20px; line-height: 1.4; }
img { max-width: 100%; width: 100%; height: auto; padding: 0; margin: 0; border: none; display: block; }
.clearfloat { zoom: 1; }
.clearfloat:before, .clearfloat:after { content: ""; display: table; }
.clearfloat:after { clear: both; }
.wrapper { max-width: 1824px; width: 100%; padding: 0 80px; margin: 0 auto; }
.wrapper.large { max-width: 1712px; }
.wrapper.medium { max-width: 1490px; }
.wrapper.small { max-width: 1208px; }
.content-wrapper { padding: 60px 0; }
.content-wrapper.no-pad-top { padding-top: 0; }
.content-wrapper.no-pad-bottom { padding-bottom: 0; }
.content-wrapper.margin-top { margin-top: 60px; }
.content-wrapper.small-padding { padding: 35px 0; }
.content-wrapper.overlap { margin-top: -170px; }
.content-wrapper.has-overlap { padding-bottom: 130px; }
.content-wrapper.dark { background-color: #effdf5; }
.content-wrapper.brown { background-color: #0B8040; }
.section-title { font-size: 50px; margin-bottom: 20px; font-weight: bold; color: #000000; }
.section-title.secondary { font-size: 40px; }
.section-title .yellow { color: #0B8040; }
.section-title .blue { color: #4aa1ad; }
.small-title { color: #000000; font-weight: bold; font-size: 24px; margin-bottom: 20px; }
.medium-title { color: #000000; font-weight: bold; font-size: 32px; margin-bottom: 20px; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-white { color: #fff; }
.medium-wrapper { max-width: 800px; }
.small-wrapper { max-width: 472px; margin-left: auto; margin-right: auto; }
.title-spacer { padding-top: 20px; }
.title-tbl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; }
.title-tbl .col.right { padding-left: 30px; }
.title-tbl .section-title.secondary { margin: 0; }
/*---------- ALIGNMENT ----------*/
.justify-center {
display: flex;
justify-content: center;
}
.align-row {
flex-direction: row;
}
.align-column {
flex-direction: column;
}
/*---------- EDITOR ----------*/
.editor ul, .editor ol { line-height: 1.4; margin-bottom: 20px; padding-left: 25px; }
.editor ul { list-style: disc; }
.editor ol { list-style: decimal; }
.editor ul li, .editor ol li { padding: 3px 0; }
.article-layout .editor p:first-child:first-letter { color: #000000; float: left; font-size: 56px; line-height: 1; padding-right: 8px; font-weight: bold; text-transform: capitalize; }
.editor blockquote { border-left: 5px solid #000000; padding: 10px 14px 10px 30px; color: #575757; font-weight: 300; position: relative; margin: 30px 0; line-height: 1.4; }
.editor blockquote:before, .editor blockquote:after { font-size: 36px; color: #000000; font-family: Arial, sans-serif; }
.editor blockquote:before { content: "“"; position: absolute; left: 14px; top: 0; }
.editor blockquote:after { content: "”"; font-size: 36px; position: relative; top: 12px; left: 4px; line-height: 0; }
.editor h2 { font-weight: bold; font-size: 24px; margin-bottom: 10px; color: #000000; }
.bulleted-three-col { list-style: disc; line-height: 1.4; margin-bottom: 20px; padding-left: 20px; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; -webkit-columns: 3; -moz-columns: 3; columns: 3; }
.bulleted-three-col li { padding: 3px 0; }
/*---------- BUTTONS ----------*/
.primary-btn { display: inline-block; vertical-align: top; cursor: pointer; height: 50px; padding: 0 70px 0 30px; line-height: 50px; border: 0 none; margin: 0; position: relative; background-color: #000; font-weight: bold; font-family: 'zwo', sans-serif; font-size: 20px; color: #fff; text-align: left; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.primary-btn:after { content: "\e91c"; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; position: absolute; right: 0; top: 0; font-size: 12px; width: 50px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: bold; font-family: 'icomoon' !important; speak: none; font-style: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: text-indent 0.3s ease 0s; -o-transition: text-indent 0.3s ease 0s; transition: text-indent 0.3s ease 0s; }
.primary-btn:hover { color: #0B8040; background-color: #000000; }
.primary-btn:hover:after { text-indent: 10px; }
.primary-btn.amanah { background-color: #4aa1ad; color: #fff; }
.primary-btn.amanah:hover { background-color: #306970; }
.primary-btn.lined { border: 1px solid #0B8040; background-color: transparent; color: #0B8040; }
.primary-btn.lined:hover { background-color: #0B8040; color: #000000; }
.link-btn { font-weight: bold; font-size: 20px; color: #0B8040; }
.link-btn:hover { color: #000000; }
.contact-btn { display: inline-block; vertical-align: top; cursor: pointer; height: 50px; padding: 0 30px 0 50px; line-height: 50px; border: 0 none; margin: 0; position: relative; background-color: #0B8040; font-weight: bold; color: #000000; text-align: left; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; border-radius: 4px; }
.contact-btn:before { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; position: absolute; left: 0; top: 0; font-size: 22px; width: 50px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.contact-btn:hover { color: #0B8040; background-color: #000000; }
.contact-btn span { display: block; line-height: 50px; font-family: 'zwo', sans-serif; font-size: 20px; }
/*---------- MESSAGES ----------*/
.alert-msg { padding: 16px; margin: 10px 0; border-radius: 4px; }
.alert-msg.info { background: #dbf5fd; color: #1196dd; }
.alert-msg.warning { background: #fff7d4; color: #ff7a32; }
.alert-msg.success { background: #e4ffd4; color: #00c449; }
.alert-msg.error { background: #fee2e2; color: #ff2f2f; }
.mega-menu > ul { text-align: left; padding: 0 20px; vertical-align: top; max-width: 260px; }
.mega-menu .title { color: #000000; font-size: 16px; font-weight: bold; }
.mega-menu a { display: block; color: #6f7070; font-size: 14px; padding: 8px 0; }
.mega-menu .title a { padding: 0; color: #000000; font-size: 16px; }
.mega-menu a:hover { color: #0B8040; }
.amanah .mega-menu a:hover { color: #4aa1ad; }
/*---------- MOBILE NAV ----------*/
.btn-menu { display: none; height: 100%; width: 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; font-size: 30px; color: #000000; }
body:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -o-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; }
body.menu-open { overflow: hidden; }
body.menu-open:after { visibility: visible; opacity: 1; z-index: 2500; -webkit-transition: opacity .3s 0s, visibility 0s 0s; -o-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
.main-search input[type="search"] { width: 100%; color: #ffffff; font-size: 2.4rem; font-weight: 300; height: 100%; background-color: transparent; padding-right: 140px; border: 0 none; display: block; font-family: 'zwo', sans-serif; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.main-search input[type="search"]:focus { outline: none; }
.main-search input[type="search"]::-webkit-input-placeholder { color: #5c5d6a; }
.main-search input[type="search"]::-moz-placeholder { color: #5c5d6a; }
.main-search input[type="search"]:-moz-placeholder { color: #5c5d6a; }
.main-search input[type="search"]:-ms-input-placeholder { color: #5c5d6a; }
input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }
.main-search { position: absolute; z-index: 1500; top: 0; left: 0; height: 100%; width: 100%; background: #1B1B1B; opacity: 0; visibility: hidden; }
.main-search .tbl { display: table; width: 100%; height: 100%; position: relative; padding: 0 80px; }
.main-search form { position: relative; height: 100%; display: table-cell; vertical-align: middle; }
.main-search .btn-search-close { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; right: 40px; top: 50%; height: 60px; width: 60px; font-size: 26px; text-align: center; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.main-search .btn-search-close:hover, .main-search .btn-search-close:focus { opacity: 0.7; }
.main-search.is-visible { opacity: 1; visibility: visible; }
.main-search.is-visible .btn-search-close { -webkit-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); }
.animate-search .main-search.is-visible { -webkit-animation: cd-slide-in 0.3s; animation: cd-slide-in 0.3s; }
@-webkit-keyframes cd-slide-in {
0% { -webkit-transform: translateY(-100%); }
100% { -webkit-transform: translateY(0); }
}
@keyframes cd-slide-in {
0% { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/*---------- COVER LAYER ----------*/
.cover-layer { display: block; position: fixed; z-index: 500; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0.3s; -o-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; }
.cover-layer.search-form-visible { opacity: 1; visibility: visible; }
/*---------- BANNER ----------*/
.banner { position: relative; height: 660px; background-repeat: no-repeat; background-position: left top; background-size: cover; }
.banner:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(66, 42, 33, 0.21); }
.banner.has-form { height: auto; }
.banner.has-form:after { background-color: rgba(66, 42, 33, 0.34); }
.banner .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; position: relative; z-index: 20; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.banner .content { max-width: 685px; font-weight: bold; }
.banner .section-title { color: #fff; font-weight: bold; }
.banner .content.block {
max-width: 594px;
background-color: rgba(245, 242, 242, 0.80);
padding: 36px 44px;
}
.banner.banc-assuarance .content.block {
background-color: rgba(48, 18, 11, 0.8);
max-width: 650px;
}
.banner.banc-assuarance .content.block p, .banner.banc-assuarance .content.block p b {
color: #ffffff;
line-height: 28px;
font-weight: 300;
}
.banner .content.block .section-title { color: #0B8040; position: relative; margin-bottom: 10px; }
.banner .content.block .section-title:before { content: ""; width: 7px; top: 4px; bottom: 4px; margin: auto; left: -44px; position: absolute; background-color: #0B8040; }
.banner .content.block p { color: #000000; font-weight: bold; font-size: 32px; line-height: 1.16; margin-bottom: 0; }
.banner .product-layout { padding-top: 80px; padding-bottom: 40px; }
.banner .product-layout .section-title { font-weight: normal; color: #0B8040; }
.banner .lead-form textarea.textbox { height: 84px !important; overflow: auto; }
/*---------- QUICK LINKS ----------*/
.quick-links-wrapper { text-align: center; margin-top: -60px; position: relative; z-index: 20; }
.quick-links { background-color: #0B8040; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 120px; overflow: hidden; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 4px; }
.quick-links a { display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }
.quick-links a:before { content: ""; width: 1px; border-left: 1px dotted #000000; position: absolute; left: 0px; top: 22px; bottom: 23px; margin: auto; }
.quick-links a:first-child:before, .quick-links a.active:before { display: none; }
.quick-links .icon { width: 42px; height: 42px; line-height: 42px; font-size: 42px; margin-bottom: 12px; }
.quick-links .text { display: block; font-size: 18px; font-weight: bold; }
.quick-links a:hover { background-color: #000; }
.quick-links a.active { background-color: #0B8040; }
.quick-links a.active + a:before { display: none; }
/*---------- ABOUT US ----------*/
.text-blocks { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: -20px 0 0 -60px; }
.text-blocks .block { padding: 50px 0 0 60px; -webkit-box-flex: 0; -ms-flex: 0 0 440px; flex: 0 0 440px; }
.text-blocks.quarter { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.text-blocks.quarter .block { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; }
.text-blocks .small-title { padding: 10px 0 0 0; margin-bottom: 16px; }
.text-blocks .icon { width: 50px; height: 50px; line-height: 50px; font-size: 48px; color: #0B8040; }
.values { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 20px; }
.values > li { padding: 0 60px; -webkit-box-flex: 0; -ms-flex: 0 0 415px; flex: 0 0 415px; }
.statistics-section { position: relative; z-index: 10; margin-top: -146px; margin-bottom: 40px; }
.statistics-wrapper { background-color: #000000; display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; padding: 0 0 0 80px; border-radius: 4px; }
.statistics-wrapper .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 408px; flex: 0 0 408px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; padding: 20px 0; }
.statistics-wrapper .col.right { -ms-flex-preferred-size: 100%; flex-basis: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 130px; }
.statistics-wrapper .section-title { color: #fff; font-size: 40px; margin-bottom: 24px; font-weight: 300; }
.statistics-wrapper p { font-weight: 300; margin-bottom: 0; }
.statistics { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
.statistics li { padding: 50px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; }
.statistics .icon { width: 60px; height: 60px; line-height: 60px; font-size: 60px; color: #0B8040; margin-bottom: 20px; display: block; }
.statistics .value { display: block; font-weight: bold; font-size: 50px; color: #000000; }
.statistics .label { display: block; font-size: 24px; font-weight: 300; }
/*---------- BANC-ASSURANCE ----------*/
.section-products .header{
text-align: center;
margin: 0 auto;
max-width: 800px;
}
.section-products .natbank-products .block {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0;
border-radius: 5px;
}
.section-products .natbank-products .small-title{
text-align: center;
}
.section-products .natbank-products .inner-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.section-products .natbank-products .inner-wrapper .btn-wrapper {
border: none;
text-align: center;
position: relative;
}
.section-products .natbank-products .inner-wrapper .btn-wrapper a {
border-radius: 5px;
text-transform: uppercase;
}
/*---------- LEADERSHIP ----------*/
.leadership { margin: -60px 0 0 -60px; font-size: 0; }
.leadership > li { display: inline-block; vertical-align: top; padding: 60px 0 0 60px; width: 33.33%; }
.leadership a { display: block; }
.leadership .pic { display: block; overflow: hidden; position: relative; border-radius: 4px; }
.leadership .pic:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); content: ''; pointer-events: none; z-index: 20; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); }
.leadership img { -webkit-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; -webkit-filter: grayscale(1); filter: grayscale(1); }
.leadership .name { display: block; color: #000000; font-size: 24px; margin: 20px 0 4px 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.leadership .designation { display: block; color: #000000; font-size: 16px; font-weight: bold; }
.leadership a:hover .pic:before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); }
.leadership a:hover img { -webkit-filter: none; filter: none; }
.leadership a:hover .name { color: #0B8040; }
/*--- Profile popup ---*/
.profile { max-width: 960px; padding: 80px 60px 60px 60px; display: none; border-radius: 4px; }
.profile img { float: left; width: 250px; position: relative; z-index: 10; margin: 0 30px 20px 0; border-radius: 4px; }
.profile .info { margin-top: 20px; }
.profile img, .profile .title, .profile .info { opacity: 0; -webkit-transition-property: transform, opacity; -webkit-transition-duration: .4s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: transform, opacity; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -o-transition-duration: .4s; transition-duration: .4s; }
.profile img, .profile .info { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
.profile .title { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); }
.profile h2 { display: block; color: #0B8040; font-weight: bold; font-size: 34px; margin: 0 0 4px 0; }
.profile .designation { display: block; color: #000000; font-size: 24px; }
.profile .fancybox-close-small { background-color: #000000; color: #0B8040; opacity: 1; }
.profile .fancybox-close-small:hover { background-color: #0B8040; color: #000000; }
/* Final state */
.fancybox-slide--complete .profile img, .fancybox-slide--complete .profile .info { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
.fancybox-slide--complete .profile .title { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }
/* Reveal content with different delays */
.fancybox-slide--complete .profile .title { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.fancybox-slide--complete .profile .info { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }
/*---------- TWO COLUMNS SUMMARY ----------*/
.two-col-summary { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 36px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.two-col-summary .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 500px; flex: 0 0 500px; }
.two-col-summary .col.right { padding-left: 60px; }
.two-col-summary p:last-child { margin-bottom: 0; }
/*---------- FILTER ----------*/
.filter { margin: 0 0 40px -60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.filter > li { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; padding: 0 0 0 60px; margin-bottom: 10px; }
.filter.single > li { width: auto; min-width: 250px; }
.filter > li.half { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.filter > li.full { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.filter > li.stretch { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.filter > li.mobile-filter-close { display: none; }
.filter select { display: block; width: 100%; height: 50px; color: #000000; padding: 0 30px; border: 1px solid #000000; background-color: #fff; font-family: 'zwo', sans-serif; font-size: 18px; cursor: pointer; letter-spacing: -0.45px; border-radius: 4px; }
.filter select option { font-size: 16px; }
.filter .show-mobile { display: none; }
.filter .input-wrapper { position: relative; height: 50px; color: #333; border: 1px solid #000000; background-color: #fff; border-radius: 4px; }
.filter .input-wrapper input { display: block; width: 100%; height: 100%; border: 0 none; margin: 0; background-color: transparent; padding: 0 30px; font-size: 18px; color: #333; font-family: 'zwo', sans-serif; }
.filter .input-wrapper.has-icon input { padding: 0 60px 0 16px; }
.filter .input-wrapper button { position: absolute; top: 0; right: 0; display: block; background-color: transparent; border: 0 none; margin: 0; width: 50px; height: 50px; line-height: 50px; font-size: 18px; cursor: pointer; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.filter .input-wrapper button:hover { color: #0B8040; }
.filter .input-wrapper input::-webkit-input-placeholder { opacity: 1; color: #333; }
.filter .input-wrapper input::-moz-placeholder { opacity: 1; color: #333; }
.filter .input-wrapper input:-moz-placeholder { opacity: 1; color: #333; }
.filter .input-wrapper input:-ms-input-placeholder { opacity: 1; color: #333; }
.blog-filter { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.blog-filter a { display: block; margin-left: 58px; font-size: 18px; font-family: 'zwo', sans-serif; color: #919eab; }
.blog-filter a:first-child { margin-left: 0; }
.blog-filter a:hover { color: #0B8040; }
.blog-filter a.active { font-weight: bold; color: #333; }
/*---------- DOCUMENTS ----------*/
.documents-set { margin-bottom: 40px; }
.documents-set:last-child { margin-bottom: 0; }
.documents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: -40px 0 0 -40px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.documents > li { padding: 40px 0 0 40px; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.documents .doc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 4px; }
.documents .cell.left { padding: 20px 20px 50px 20px; position: relative; }
.documents .cell.right { -webkit-box-flex: 0; -ms-flex: 0 0 140px; flex: 0 0 140px; background-color: #ededed; }
.documents .title { font-size: 18px; display: block; color: #000000; }
.documents .date { position: absolute; width: 100%; left: 0; bottom: 0; padding: 12px 20px 20px 20px; color: #a3a3a3; font-weight: bold; display: block; font-size: 12px; }
.documents .action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.documents .action > a { display: block; padding: 20px; text-align: center; }
.documents .icon { width: 26px; height: 26px; line-height: 26px; display: block; color: #000; font-size: 20px; }
.sharing { position: relative; }
.btn-share { cursor: pointer; position: relative; z-index: 1; padding: 20px; }
.btn-share:hover { color: #000; }
.sharer { position: absolute; background-color: #000000; opacity: 0; visibility: hidden; z-index: 5; left: 0; right: 0; bottom: 50px; margin: auto; text-align: center; padding: 5px 0; width: 34px; border-radius: 17px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.sharing.show .sharer { opacity: 1; visibility: visible; bottom: 56px; }
.sharer a { display: block; padding: 10px 0; color: #fff; font-size: 16px; width: 34px; text-decoration: none; }
.sharer a:hover { color: #0B8040; }
.documents .action a:hover .icon, .documents .btn-share:hover .icon { color: #0B8040; }
/*---------- PAGE SUMMARY ----------*/
.page-summary .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 36px; }
.page-summary .wrapper .col.left { padding-right: 60px; max-width: 1042px; }
.page-summary .wrapper .col.right { width: 570px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
/*---------- BREADCRUMBS ----------*/
#breadcrumbs { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; }
#breadcrumbs li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; font-weight: 300; }
#breadcrumbs li:after { content: "/"; padding: 0 5px; }
#breadcrumbs li:last-child:after { display: none; }
#breadcrumbs a { color: #000000; display: block; padding: 10px 0; }
#breadcrumbs a:hover { text-decoration: underline; }
#breadcrumbs a.active { color: #0B8040; pointer-events: none; }
.banner #breadcrumbs { position: absolute; left: 80px; top: 40px; color: #000000; }
.banner #breadcrumbs a.active { color: #fff; }
/*---------- BRANCHES ----------*/
.branches { margin: -60px 0 0 -60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.branches > li { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; padding: 60px 0 0 60px; }
.branches .block { background-color: #f6f2f2; overflow: hidden; padding: 24px 30px 60px 30px; position: relative; height: 100%; border-radius: 4px; }
.branches ul li { position: relative; padding-left: 34px; color: #000000; margin-bottom: 16px; }
.branches ul li:before { width: 20px; height: 20px; line-height: 20px; font-size: 17px; position: absolute; left: 0; top: 0; bottom: 0; text-align: center; margin: auto; }
.branches ul li span, .branches ul li a, .branches ul li p { display: block; font-family: 'zwo', sans-serif; color: #000000; line-height: 1.33; }
.branches ul li p { margin-bottom: 0; }
.branches ul li a:hover { text-decoration: underline; }
.branches .primary-btn { position: absolute; left: 0; bottom: 0; width: 100%; }
.branches h3 a { color: #000000; }
.branches h3 a:hover { color: #0B8040; }
/*--- Vehicles ---*/
.branches.vehicles .block { padding: 0 0 60px 0; }
.branches.vehicles .desc { padding: 24px 30px 0 30px; }
.branches.vehicles ul li:before { width: 24px; height: 24px; line-height: 24px; font-size: 22px; }
/*--- Vehicle Details ---*/
.vehicle-details .price { display: block; color: #0B8040; }
.vehicle-details .section-title-tbl { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 2px solid #effdf5; padding-bottom: 20px; margin-bottom: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.vehicle-details .section-title-tbl .cell.right { text-align: right; display: none; }
.vehicle-details .section-title-tbl .section-title { margin-bottom: 0; }
.vehicle-details .section-title-tbl .btn-enquire { font-weight: bold; text-align: center; display: inline-block; vertical-align: middle; background-color: #0B8040; color: #000000; font-size: 16px; height: 40px; line-height: 40px; padding: 0 20px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.vehicle-details .section-title-tbl .btn-enquire:hover { background-color: #000000; color: #0B8040; }
.vehicle-gallery { margin-bottom: 40px; }
.vehicle-info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.vehicle-info li { display: block; position: relative; padding: 0 20px 20px 40px; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; }
.vehicle-info li:before { position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; left: 0; top: -2px; font-size: 30px; color: #000000; }
.vehicle-info span { display: block; font-size: 16px; font-family: 'zwo', sans-serif; }
.vehicle-info .label { font-weight: bold; font-size: 20px; margin-bottom: 6px; }
.vehicle-details .widget { padding: 24px 30px; background-color: #effdf5; margin-top: 40px; }
.vehicle-details .widget:first-child { margin-top: 0; }
.related-vehicles { margin: -20px 0 0 -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.related-vehicles li { display: inline-block; vertical-align: top; width: 50%; padding: 20px 0 0 30px; }
.related-vehicles .pic { background-color: #000; display: block; margin-bottom: 18px; }
.related-vehicles .pic img { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.related-vehicles .pic:hover img { opacity: 0.7; }
.related-vehicles h4 { font-size: 20px; color: #000000; margin-bottom: 5px; font-weight: bold; }
.related-vehicles h4 a { color: #000000; }
.related-vehicles h4 a:hover { color: #0B8040; }
.related-vehicles .info { margin: 0; font-size: 16px; }
/*--- Timeline ---*/
.timeline { position: relative; max-width: 892px; margin: 0 auto 0 auto; }
.timeline:before { content: ''; position: absolute; top: 0; height: 100%; width: 1px; left: 0; right: 0; background-color: #000000; margin: auto; }
.timeline .block { display: -ms-flexbox; display: -webkit-box; display: flex; position: relative; }
.timeline .block:after { content: ""; width: 3px; height: 0px; background-color: #0B8040; position: absolute; top: 0; right: 0; left: 0; margin: auto; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; }
.timeline .block.active:after { height: 100%; }
.timeline .block .timeline-content { width: 50%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; padding-right: 32px; margin-bottom: 40px; position: relative;/* margin-top:-130px;*/ }
.timeline .block:first-child .timeline-content { margin-top: 0; }
.timeline .year { display: block; font-size: 50px; padding: 0 26px; font-weight: 300; margin: -34px 0 0 0; position: relative; color: #000000; z-index: 10; text-align: right; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.timeline .block.active .year { color: #0B8040; }
.timeline .year:after, .timeline .year:before { content: ""; width: 12px; height: 12px; border: 3px solid #000000; z-index: 5; position: absolute; right: -38px; top: 0; bottom: 0; margin: auto; background-color: #fff; border-radius: 50%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.timeline .year:before { width: 19px; height: 19px; border: 4px solid #fff; right: -41px; }
.timeline .block.active .year:after { background-color: #0B8040; }
.timeline .block:nth-child(even) { text-align: left; -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; }
.timeline .block:nth-child(even) .timeline-content { padding: 0 0 0 32px; }
.timeline .block:nth-child(even) .year:after { left: -38px; right: auto; }
.timeline .block:nth-child(even) .year:before { left: -42px; right: auto; }
.timeline .block img { opacity: 0.5; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.timeline .block.active img { opacity: 1; }
/*---------- FEATURED PRODUCTS ----------*/
.featured-products { padding-top: 10px; }
.featured-products.owl-carousel .owl-stage { margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; }
.featured-products.owl-carousel .owl-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; }
.featured-products .item { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; padding: 6px; overflow: hidden; }
.featured-products .block { position: relative; padding-bottom: 60px; background-color: #fff; overflow: hidden; height: 100%; border-radius: 4px; -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14); }
.featured-products .pic-wrapper { display: block; position: relative; overflow: hidden; }
.featured-products .pic-wrapper img { -webkit-transition: opacity 0.35s, -webkit-transform 0.6s, -webkit-filter 0.6s; transition: opacity 0.35s, -webkit-transform 0.6s, -webkit-filter 0.6s; -o-transition: opacity 0.35s, transform 0.6s, filter 0.6s; transition: opacity 0.35s, transform 0.6s, filter 0.6s; transition: opacity 0.35s, transform 0.6s, filter 0.6s, -webkit-transform 0.6s, -webkit-filter 0.6s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.featured-products .pic-wrapper:hover img { -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
.featured-products .desc { padding: 17px 24px 0 24px; }
.featured-products .small-title { margin-bottom: 16px; }
.featured-products p { font-weight: 300; font-size: 18px; margin-bottom: 6px; }
.featured-products .primary-btn { position: absolute; left: 0; bottom: 0; width: 100%; }
.featured-products.owl-carousel .owl-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; }
.featured-products.owl-carousel .owl-nav.disabled { display: none; }
.featured-products.owl-carousel .owl-nav button { width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; color: #000000; margin: 0 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 24px; border-radius: 4px; -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.featured-products.owl-carousel .owl-nav button:hover { color: #0B8040; }
.featured-products.owl-carousel .owl-nav button.disabled { color: #DDDDDD; pointer-events: none; }
/*-------- RELATED PRODUCTS ----------*/
.related-products { display: table; width: 100%; table-layout: fixed; }
.related-products .col { display: table-cell; }
.related-products .col.left { width: 25%; padding-right: 80px; vertical-align: middle; }
/*---------- APP BANNER ----------*/
.app-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.app-wrapper .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 71%; flex: 0 0 71%; padding-right: 140px; }
.app-wrapper .section-title { color: #fff; margin-bottom: 10px; }
.app-wrapper .title { text-transform: uppercase; font-weight: bold; margin-bottom: 10px; }
.app-wrapper p { font-weight: 300; }
.app-wrapper .app-download { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 15px; }
.app-wrapper .app-download a { -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; margin-left: 20px; }
.app-wrapper .app-download a:first-child { margin-left: 0; }
.app-wrapper .app-download a:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
/*---------- AMANAH ----------*/
.amanah #main_nav a:hover, .amanah #main_nav a.active { color: #4aa1ad; }
.amanah #main_nav a.active:after { background-color: #4aa1ad; }
.amanah .mobile-nav > li a.active { color: #4aa1ad; }
.amanah .banner .content.block .section-title { color: #4aa1ad; }
.amanah .banner .content.block .section-title:before { background-color: #4aa1ad; }
.amanah .primary-btn { background-color: #4aa1ad; color: #fff; }
.amanah .primary-btn:hover { background-color: #306970; }
.amanah .featured-products.owl-carousel .owl-nav button:hover { color: #4aa1ad; }
.amanah .quick-links a.active { background-color: #4aa1ad; color: #fff; }
/*---------- PRODUCT QUICK LINKS ----------*/
.product-quick-links { display: -webkit-box; display: -ms-flexbox; display: flex; }
.product-quick-links .section-title { margin-bottom: 10px; }
.product-quick-links .col { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; text-align: center; }
.product-quick-links .col.left { background-color: #f6f2f2; color: #000000; }
.product-quick-links .col.right { background-color: #000000; color: #0B8040; }
.product-quick-links .col.right .section-title { color: #0B8040; }
.product-quick-links .content-wrapper { padding-bottom: 40px; }
.product-quick-links .links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.product-quick-links a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #000000; }
.product-quick-links .col.right a { color: #0B8040; }
.product-quick-links .icon { width: 42px; height: 42px; line-height: 42px; font-size: 42px; margin-bottom: 12px; }
.product-quick-links .text { display: block; font-size: 18px; font-weight: bold; }
.product-quick-links a:hover { color: #0B8040; }
.product-quick-links .col.right a:hover { color: #fff; }
/*---------- PRODUCT LAYOUT ----------*/
.product-layout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.product-layout .col.left {
padding-right: 40px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
min-width: 0;
}
.product-layout .col.right {
-webkit-box-flex: 0;
-ms-flex: 0 0 570px;
flex: 0 0 570px;
}
.product-layout .col.left .accordion li .title {
font-weight: normal;
}
.product-layout .col.left .accordion li.content-visible .title {
font-weight: bold;
}
.product-layout .col.left .accordion li .desc h4 {
font-weight: bold;
margin: 15px 0;
}
/*---------- MISSION VISION LAYOUT ----------*/
.our-mission-vision {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 30px;
margin-top: 60px;
}
.our-mission-vision .item {
background: #F5F0F0;
border-radius: 5px;
padding: 25px;
text-align: center;
}
.our-mission-vision .item i {
font-size: 68px;
color: #000000;
}
.our-mission-vision .item h4 {
font-size: 20px;
line-height: 20px;
font-weight: bold;
color: #000000;
margin: 15px 0;
}
/*--- Benefits ---*/
.benefits { display: -webkit-box; display: -ms-flexbox; display: flex; margin: -30px 0 0 -50px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.benefits li { padding: 40px 0 0 50px; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; }
.benefits .block { background-color: #f6f2f2; padding: 26px 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; border-radius: 4px; -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.16); }
.benefits .icon { width: 72px; margin-bottom: 20px; }
.benefits .title { display: block; font-weight: bold; font-size: 18px; color: #000000; margin-bottom: 12px; }
.benefits p { font-size: 16px; margin-bottom: 0; }
/*--- Product Details ---*/
.product-details { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 40px; }
.product-details .cell.left { padding-right: 60px; }
.product-details .small-title { margin-bottom: 12px; }
/*---------- LEAD FORM ----------*/
.lead-form { background-color: #000000; color: #fff; padding: 34px 60px; }
.lead-form .small-title { color: #fff; }
.lead-form .field { margin-bottom: 24px; }
.lead-form .field.btn-field { margin-bottom: 0; }
.lead-form .label { display: block; font-weight: 300; margin-bottom: 10px; font-size: 18px; }
.lead-form .textbox { height: 50px; display: block; width: 100%; border: 1px solid #fff; background-color: transparent; font-family: 'zwo', sans-serif; font-size: 18px; padding: 0 18px; color: #fff; }
.lead-form textarea.textbox { resize: none; padding: 13px 18px; overflow: hidden; }
.lead-form::-webkit-input-placeholder { opacity: 0.27; color: #fff; }
.lead-form::-moz-placeholder { opacity: 0.27; color: #fff; }
.lead-form:-moz-placeholder { opacity: 0.27; color: #fff; }
.lead-form:-ms-input-placeholder { opacity: 0.27; color: #fff; }
.lead-form input::-webkit-outer-spin-button, .lead-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lead-form input[type=number] { -moz-appearance: textfield; }
.lead-form select option { color: #000000; font-size: 16px; }
.lead-form .select2-container--default .select2-selection--single { background-color: transparent; border-color: #fff; }
.lead-form .select2-dropdown { background-color: #fff; border-color: #fff; border-radius: 0; }
.lead-form .select2-container--default .select2-selection--single { border-radius: 0; }
.lead-form .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; padding-left: 18px; }
.lead-form .select2-container--default .select2-selection--single .select2-selection__arrow:before { color: #fff; }
.lead-form .select2-results { color: #000000; }
.lead-form .primary-btn { width: 100%; border: 1px solid #0B8040; }
.lead-form .field.error .label { color: #e94b35; }
.lead-form .field.error .textbox { border-color: #e94b35; }
.lead-form .alert-msg { border-radius: 0; }
/*---------- PREMIUM ----------*/
.premium #main_nav a:hover, .premium #main_nav a.active { color: #ba2126; }
.premium #main_nav a.active:after { background-color: #ba2126; }
.premium .mobile-nav > li a.active { color: #ba2126; }
.premium .primary-btn { background-color: #ba2126; color: #fff; }
.premium .primary-btn:hover { background-color: #8F191D; }
.premium .featured-products.owl-carousel .owl-nav button:hover { color: #ba2126; }
.premium .lead-form .primary-btn { border: 0 none; }
.premium #breadcrumbs a.active, .premium .section-title, .premium .small-title { color: #ba2126; }
/*--- Cards Slider ---*/
.cards-slider { max-width: 300px; margin: 0 auto; }
.cards-slider .owl-dots { font-size: 0; text-align: center; margin-top: 10px; }
.cards-slider .owl-dots button { display: inline-block; vertical-align: top; padding: 8px !important; }
.cards-slider .owl-dots span { display: block; width: 12px; height: 12px; background-color: #bebebe; border-radius: 50%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.cards-slider .owl-dots button:hover span { background-color: #A1A1A1; }
.cards-slider .owl-dots button.active span { background-color: #0B8040; opacity: 1; }
/*--- Properties Slider ---*/
.properties-slider { margin: 0 auto; }
.properties-slider .owl-dots { font-size: 0; text-align: center; margin-top: 10px; }
.properties-slider .owl-dots button { display: inline-block; vertical-align: top; padding: 8px !important; }
.properties-slider .owl-dots span { display: block; width: 12px; height: 12px; background-color: #bebebe; border-radius: 50%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.properties-slider .owl-dots button:hover span { background-color: #A1A1A1; }
.properties-slider .owl-dots button.active span { background-color: #0B8040; opacity: 1; }
/*---------- COMPARISON TABLE ----------*/
.comparison-table { width: 100%; color: #000000; }
.comparison-table thead { text-align: left; }
.comparison-table th, .comparison-table td { padding: 10px 40px; }
.comparison-table th.yellow, .comparison-table td.yellow { background-color: #fece2f; }
.comparison-table th.grey, .comparison-table td.grey { background-color: #e0dccd; }
.comparison-table td { font-size: 18px; }
.comparison-table tbody tr:nth-child(odd) { position: relative; background-color: rgba(190, 190, 190, 0.22); }
.comparison-table tbody tr:nth-child(odd) td.yellow { background-color: #f0cb4f; }
.comparison-table tbody tr:nth-child(odd) td.grey { background-color: #d9d6ca; }
/*---------- LOAN CALCULATOR ----------*/
.loan-calculator { background-color: #f7f7f7; padding: 36px; padding-right: 370px; position: relative; border-radius: 4px; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
.loan-calculator form { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 0 -18px; }
.loan-calculator .field { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; padding: 0 18px; }
.loan-calculator .label { display: block; font-size: 18px; font-weight: 300; margin-bottom: 2px; color: #000000; }
.loan-calculator .input-wrapper { position: relative; }
.loan-calculator .textbox { border: 1px solid #000000; height: 50px; padding: 0 15px; font-family: 'zwo', sans-serif; color: #000000; display: block; width: 100%; margin: 0; font-size: 18px; }
.loan-calculator .textbox.has-label { padding-right: 70px; }
.loan-calculator .input-wrapper label { position: absolute; right: 0; top: 0; line-height: 50px; font-size: 18px; font-weight: 300; color: #000000; padding-right: 15px; }
.loan-calculator::-webkit-input-placeholder { opacity: 0.27; color: #000000; }
.loan-calculator::-moz-placeholder { opacity: 0.27; color: #000000; }
.loan-calculator:-moz-placeholder { opacity: 0.27; color: #000000; }
.loan-calculator:-ms-input-placeholder { opacity: 0.27; color: #000000; }
.loan-calculator input::-webkit-outer-spin-button, .loan-calculator input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.loan-calculator input[type=number] { -moz-appearance: textfield; }
.loan-calculator .select2-container--default .select2-selection--single { border-radius: 0; }
.loan-calculator .select2-dropdown { border-radius: 0; }
.loan-calculator button { display: block; height: 50px; background-color: #000000; text-align: center; cursor: pointer; font-family: 'zwo', sans-serif; font-weight: bold; color: #0B8040; border: 0 none; width: 100%; margin: 0; font-size: 20px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.loan-calculator button:hover { background-color: #0B8040; color: #000000; }
.loan-calculator .alert-msg { margin-right: 18px; }
.loan-calculator .results { width: 346px; position: absolute; right: 40px; color: #000000; top: 50%; background-color: #0B8040; padding: 20px 50px; opacity: 0; border-radius: 4px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.loan-calculator .results.show { opacity: 1; right: 0; }
.loan-calculator .results .title { display: block; font-weight: 300; font-size: 18px; }
.loan-calculator .results .value { display: block; }
.loan-calculator .results li { margin-top: 18px; }
.loan-calculator .results li:first-child { margin-top: 0; }
.loan-calculator .results:before { content: "\e918"; font-size: 14px; width: 30px; text-align: center; position: absolute; left: -11px; top: 0; bottom: 0; margin: auto; height: 30px; line-height: 30px; font-family: 'icomoon' !important; speak: none; font-weight: bold; font-style: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.loan-calculator .field.error .label { color: #e94b35; }
.loan-calculator .field.error .textbox { border-color: #e94b35; }
/*---------- ACCORDION ----------*/
.accordion > li { background-color: #f6f2f2; margin-top: 10px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; border-radius: 4px; }
.accordion > li:first-child { margin-top: 0; }
.accordion .title { display: block; padding: 18px 72px 18px 20px; position: relative; color: #000000; cursor: pointer; font-weight: bold; }
.accordion .title a { color: #000000; }
.accordion .title:after { display: block; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; content: "+"; font-size: 19px; color: #000000; width: 30px; text-align: center; height: 30px; line-height: 26px; border: 2px solid #000000; border-radius: 4px; }
.accordion > li:hover .title:after { color: #0B8040; border-color: #0B8040; }
.accordion .content-visible .title:after, .accordion .content-visible:hover .title:after { content: "-"; }
.accordion .desc { padding: 0 20px 28px 20px; display: none; font-size: 16px; }
.accordion .desc p { margin: 0; padding-top: 20px; }
.accordion .desc p:first-child, .accordion .desc p.no-padding { padding-top: 0; }
.accordion .desc ul { list-style: square; padding-left: 18px; }
.accordion .desc ol { list-style: decimal; padding-left: 18px; }
.accordion .desc ul li, .accordion .desc ol li { padding-top: 14px; }
.accordion .desc ul li:first-child, .accordion .desc ol li:first-child { padding-top: 0; }
.accordion .desc ol ul { padding: 10px 0 0 10px; }
.accordion .desc ol p { font-weight: normal; }
.accordion .desc strong { color: #333; }
.accordion .desc h3 { margin: 20px 0; font-weight: bold; color: #000000; }
.accordion .desc h3.no-margin-top { margin-top: 0; }
.accordion.half { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -2%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.accordion.half li { -webkit-box-flex: 0; -ms-flex: 0 0 48%; flex: 0 0 48%; margin: 0 0 20px 2%; }
/*---------- TABS ----------*/
.tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px 0 15px 0; }
.tabs a { position: relative; padding: 16px; font-weight: bold; color: #000000; font-size: 30px; margin: 0 26px; }
.tabs a:before { content: ""; width: 9px; height: 9px; background-color: #000000; position: absolute; top: 0; bottom: 0; left: -30px; margin: auto; border-radius: 9px; }
.tabs a:first-child:before { display: none; }
.tabs a:hover, .tabs a.active { color: #0B8040; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.tabs-dd-wrapper { padding: 30px 6px 20px 6px; display: none; }
.tabs-dd { width: 100%; height: 50px; color: #000000; border: 1px solid #000000; background-color: transparent; font-weight: bold; font-family: 'zwo', sans-serif; padding: 0 12px; margin: 0; border-radius: 4px; }
/*---------- FEATURED NEWS ----------*/
.featured-news { display: -webkit-box; display: -ms-flexbox; display: flex; }
.featured-news .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; margin-right: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.featured-news ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 -24px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; }
.featured-news ul li { padding: 0 0 24px 24px; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
.featured-news ul li:last-child { padding-bottom: 0; }
.featured-news .block { background-color: #f4f4f4; height: 100%; position: relative; overflow: hidden; border-radius: 4px; -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14); }
.featured-news .desc { padding: 26px 26px 70px 26px; }
.featured-news .pic-wrapper { display: block; position: relative; overflow: hidden; }
.featured-news .pic-wrapper img { -webkit-transition: opacity 0.35s, -webkit-transform 0.6s, -webkit-filter 0.6s; transition: opacity 0.35s, -webkit-transform 0.6s, -webkit-filter 0.6s; -o-transition: opacity 0.35s, transform 0.6s, filter 0.6s; transition: opacity 0.35s, transform 0.6s, filter 0.6s; transition: opacity 0.35s, transform 0.6s, filter 0.6s, -webkit-transform 0.6s, -webkit-filter 0.6s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.featured-news .pic-wrapper:hover img { -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
.featured-news .small-title { margin-bottom: 26px;padding:15px 1px 15px 1px;background-color:#000;color: #fff; }
.featured-news .primary-btn { position: absolute; left: 0; bottom: 0; width: 100%; }
.featured-news .col.left .block { background-color: #fff; }
.featured-news p { margin-bottom: 0; }
/*---------- NEWSROOM ----------*/
.news { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -58px 0 0 -58px; }
.news .item { width: 33.33%; padding: 58px 0 0 58px; -webkit-box-flex: 0; -ms-flex: none; flex: none; }
.news .block { background-color: #f5f2f2; }
.news .small-title, .news-articles .small-title { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
.news .small-title a { color: #000000; }
.news .small-title a:hover { color: #0B8040; }
.news .meta { position: absolute; left: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24px 24px 10px 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; }
.news .meta .date { text-transform: uppercase; color: #728694; font-size: 14px; font-weight: bold; }
.news .meta .share-article a { width: 20px; height: 20px; line-height: 20px; font-size: 16px; }
.news .news-category { position: absolute; left: 24px; top: 24px; z-index: 5; }
.news-category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #0B8040; color: #000000; padding: 0 22px; font-size: 14px; font-weight: bold; height: 30px; pointer-events: none; border-radius: 15px; }
a.news-category { color: #000000; pointer-events: all; }
a.news-category:hover { background-color: #000000; color: #0B8040; }
/*---------- DEALS ----------*/
.deals-popup { max-width: 640px; padding: 60px 40px 40px 40px; display: none; border-radius: 4px; }
.deals-popup img { position: relative; margin: 0 0 20px 0; z-index: 10; border-radius: 4px; }
.deals-popup .info { margin-top: 20px; }
.deals-popup img, .deals-popup .section-title, .deals-popup .info { opacity: 0; -webkit-transition-property: transform, opacity; -webkit-transition-duration: .4s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: transform, opacity; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -o-transition-duration: .4s; transition-duration: .4s; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
.deals-popup .primary-btn { opacity: 0; border-radius: 4px; }
.deals-popup .fancybox-close-small { background-color: #000000; color: #0B8040; opacity: 1; }
.deals-popup .fancybox-close-small:hover { background-color: #0B8040; color: #000000; }
/* Final state */
.fancybox-slide--complete .deals-popup img, .fancybox-slide--complete .deals-popup .section-title, .fancybox-slide--complete .deals-popup .info { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
.fancybox-slide--complete .deals-popup .primary-btn { opacity: 1; }
/* Reveal content with different delays */
.fancybox-slide--complete .deals-popup .section-title { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.fancybox-slide--complete .deals-popup .info { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; }
.fancybox-slide--complete .deals-popup .primary-btn { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; }
/*---------- PAGINATION ----------*/
.pagination { font-size: 0; text-align: center; margin-top: 40px; }
.pagination li { display: inline-block; vertical-align: middle; margin: 5px; }
.pagination li a, .pagination li span { padding: 0 5px; font-size: 16px; color: #333; display: block; height: 40px; line-height: 40px; text-align: center; text-decoration: none; font-weight: bold; }
.pagination li a { border: 1px solid #e6e6e6; padding: 0 14px; min-width: 40px; background-color: #fff; border-radius: 3px; }
.pagination li a:hover { background-color: #f2f2f2; }
.pagination li a.current { background-color: #000000; color: #0B8040; border-color: #000000; }
.pagination li.prev a, .pagination li.next a { font-size: 20px; padding: 0 10px; color: #000000; line-height: 38px; }
.pagination li.next { margin-right: 0; }
.pagination li a.disabled { pointer-events: none; opacity: 0.6; }
/*---------- ARTICLE ----------*/
.article-layout { padding: 40px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.article-layout .col.left { padding-right: 80px; }
.article-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 445px; flex: 0 0 445px; background-color: #effdf5; padding: 24px 30px; }
.article-layout .section-title.secondary { margin-bottom: 12px; }
.article-meta { font-weight: 300; font-size: 17px; color: #000; display: block; }
.article-banner { margin: 24px 0 36px 0; border-radius: 11px; }
.article-banner .caption { font-size: 13px; color: #000; margin-top: 6px; display: block; }
.article.editor { color: #000; font-weight: 300; }
.share-article-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #ededed; margin-top: 30px; padding-top: 10px; }
.share-article-wrapper .label { text-transform: uppercase; font-weight: bold; font-size: 17px; margin-right: 10px; }
.share-article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.share-article a { font-size: 20px; color: #000; width: 30px; height: 30px; line-height: 30px; display: block; text-align: center; margin: 10px; }
.share-article a:hover { color: #0B8040; }
/*--- Recent Articles ---*/
.article-layout .col.right .featured-products .item { padding: 0; margin-top: 30px; }
.article-layout .col.right .featured-products .item:first-child { margin-top: 0; }
.article-layout .meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid #ededed; margin-top: 30px; padding-top: 10px; }
.article-layout .meta .share-article-wrapper { border: 0 none; margin-top: 0; padding-top: 0; }
.blog-recent-articles { margin-top: 40px; }
.blog-recent-articles .news { margin-left: -30px; }
.blog-recent-articles .news .item { padding-left: 30px; }
.blog-recent-articles .news .small-title { font-size: 18px; }
/*---------- CONTACTS ----------*/
.contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.contacts li { padding: 10px 26px; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; }
.contacts .contact-btn { display: block; }
/*---------- SUPPORT ----------*/
.support-layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.support-layout .col.left { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding-right: 10%; }
.support-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 36%; flex: 0 0 36%; }
.support-layout .content-block { padding: 42px 70px 50px 70px; background-color: #f5f2f2; height: 100%; border-radius: 5px; }
.support-layout .content-block.dark { background-color: #000000; color: #fff; }
.support-layout .lead-form { background-color: transparent; padding: 0; color: #000000; padding-top: 10px; }
.support-layout .lead-form .textbox { border-color: #000000; color: #000000; }
.support-layout .lead-form::-webkit-input-placeholder { opacity: 0.27; color: #000000; }
.support-layout .lead-form::-moz-placeholder { opacity: 0.27; color: #000000; }
.support-layout .lead-form:-moz-placeholder { opacity: 0.27; color: #000000; }
.support-layout .lead-form:-ms-input-placeholder { opacity: 0.27; color: #000000; }
.support-layout .lead-form .primary-btn { border: 0 none; }
.support-layout .content-block.dark .section-title { color: #fff; }
.support-contacts li { padding: 18px 0; }
.support-contacts .contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 30px; }
.support-contacts .contact .icon { width: 34px; line-height: 34px; margin-right: 20px; display: block; text-align: center; color: #0B8040; }
.support-contacts .contact .icon.icon-phone-filled { -ms-flex-item-align: start; align-self: flex-start; top: 5px; position: relative; }
.support-contacts i { font-style: normal; }
.support-contacts .star { font-weight: bold; font-size: 50px; position: relative; top: 8px; }
.support-contacts span { font-weight: 300; color: #fff; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.support-contacts a { color: #fff; }
.support-contacts a.contact:hover span, .support-contacts a:hover { color: #0B8040; }
.support-contacts p { margin: 0; }
/*---------- THANK YOU PAGE ----------*/
.thank-you { margin-top: 40px; }
.thank-you .icon { font-size: 150px; display: inline-block; vertical-align: top; margin-bottom: 30px; color: #0B8040; }
.thank-you .section-title { margin-bottom: 10px; }
.thank-you p { font-size: 24px; margin-bottom: 40px; }
.thank-you .small-wrapper { max-width: 500px; }
/*---------- ERROR PAGE ----------*/
.error-page { margin-top: 40px; }
.error-page .pic { max-width: 430px; margin: 0 auto 10px auto; }
.error-page .section-title { font-size: 110px; line-height: 1; margin-bottom: 0; }
.error-page p { font-size: 30px; color: #000000; }
/*---------- SEARCH FORM ----------*/
.search-form { margin-bottom: 30px; }
.search-form .input-wrapper { position: relative; }
.search-form .input-wrapper input { border: 1px solid #000000; display: block; margin: 0; padding: 0 90px 0 36px; height: 70px; color: #000000; font-size: 30px; width: 100%; font-family: 'zwo', sans-serif; font-weight: bold; border-radius: 4px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.search-form::-webkit-input-placeholder { opacity: 0.5; }
.search-form::-moz-placeholder { opacity: 0.5; }
.search-form:-moz-placeholder { opacity: 0.5; }
.search-form:-ms-input-placeholder { opacity: 0.5; }
.search-form .input-wrapper input:focus { border-color: #0B8040; }
.search-form .input-wrapper button { display: block; border: 0 none; background-color: transparent; width: 70px; height: 70px; font-size: 26px; cursor: pointer; color: #000; position: absolute; right: 0; top: 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.search-form .input-wrapper button:hover { color: #0B8040; }
/*---------- SEARCH RESULTS ----------*/
.search-results > li { margin-top: 30px; }
.search-results .block { display: block; position: relative; background-color: #ededed; padding: 24px 90px 24px 30px; border-radius: 4px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.search-results .block:after { content: "\e918"; width: 28px; height: 20px; line-height: 20px; position: absolute; top: 0; right: 30px; bottom: 0; margin: auto; text-align: center; font-size: 16px; color: #a3a3a3; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.search-results p { margin-bottom: 0; }
.search-results a { text-indent: -9999px; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.search-results .block:hover { background-color: #000000; color: #fff; -webkit-box-shadow: 0px 10px 20px 0 rgba(0, 1, 0, 0.25); box-shadow: 0px 10px 20px 0 rgba(0, 1, 0, 0.25); }
.search-results .block:hover:after { color: #fff; right: 24px; }
.search-results .block:hover .small-title { color: #0B8040; }
.searching { display: inline-block; position: relative; padding-right: 26px; line-height: 24px; }
.searching:after { content: ""; width: 24px; height: 24px; position: absolute; right: 0; top: 0; background: url("../images/loader.svg") 0 0 no-repeat; background-size: 100%; }
/*---------- TENDERS ----------*/
.tenders > li { margin-top: 30px; }
.tenders > li:first-child { margin-top: 0; }
.tenders .block { display: block; position: relative; background-color: #ededed; padding: 24px 90px 24px 30px; border-radius: 4px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.tenders .block:after { content: "\e918"; width: 28px; height: 20px; line-height: 20px; position: absolute; top: 0; right: 30px; bottom: 0; margin: auto; text-align: center; font-size: 20px; color: #a3a3a3; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.tenders h2 { font-size: 24px; margin-bottom: 14px; color: #000; }
.tenders p { margin-bottom: 0; }
.tender-meta { font-size: 0; }
.tender-meta span { display: inline-block; vertical-align: middle; line-height: 24px; font-size: 14px; color: #a3a3a3; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.tender-meta .sep { width: 1px; height: 14px; background-color: #a3a3a3; margin: 0 14px; position: relative; top: 1px; }
.tenders a { text-indent: -9999px; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tenders .block:hover { background-color: #000000; color: #0B8040; -webkit-box-shadow: 0px 10px 20px 0 rgba(0, 1, 0, 0.25); box-shadow: 0px 10px 20px 0 rgba(0, 1, 0, 0.25); }
.tenders .block:hover:after, .tenders .block:hover h2, .tenders .block:hover .tender-meta span { color: #0B8040; }
.tenders .block:hover .tender-meta .sep { background-color: #0B8040; }
.tenders .block:hover:after { right: 24px; }
/*---------- ETHICS ----------*/
.page-summary.ethics .wrapper .col.right { -ms-flex-item-align: start; align-self: flex-start; padding-top: 80px; width: 570px; }
.ethics-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -15px 0 0 -15px; }
.ethics-list li { padding: 15px 0 0 15px; width: 50%; }
.ethics-list a { display: block; overflow: hidden; background-color: #000; position: relative; border-radius: 4px; }
.ethics-list img { display: block; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.6s; transition: opacity 0.35s, -webkit-transform 0.6s; -o-transition: opacity 0.35s, transform 0.6s; transition: opacity 0.35s, transform 0.6s; transition: opacity 0.35s, transform 0.6s, -webkit-transform 0.6s; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
.ethics-list a:hover img { opacity: 0.6; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.ethics-list .caption { position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); font-size: 16px; padding: 22px; color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ethics-list a:hover .caption { color: #0B8040; }
.ethics-list .icon { width: 50px; height: 50px; line-height: 50px; font-size: 48px; margin: 0 auto 12px auto; display: block; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.ethics-list .title { font-size: 26px; max-width: 250px; margin: 0 auto; display: block; font-weight: bold; text-align: center; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
/*---------- NATBANK ----------*/
.natbank-products { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -20px 0 0 -30px; }
.natbank-products li {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
padding: 30px 0 0 30px;
}
.natbank-products .block { overflow: hidden; background-color: #f6f2f2; position: relative; height: 234px; background-position: center center; background-repeat: no-repeat; padding: 24px 30px 80px 30px; background-size: cover; border-radius: 4px; }
.natbank-products .block:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(66, 42, 33, 0.5); z-index: 1; }
.natbank-products .small-title { color: #fff; position: relative; z-index: 5; }
.natbank-products .btn-wrapper { border-top: 1px solid #fff; position: absolute; left: 0; bottom: 0; padding: 18px 30px; width: 100%; z-index: 5; }
.natbank-products a { display: inline-block; vertical-align: top; border: 1px solid #fff; line-height: 41px; padding: 0 16px; font-size: 20px; color: #fff; }
.natbank-products a:hover { background-color: #0B8040; color: #000000; border-color: #0B8040; }
.products-popup { max-width: 640px; padding: 40px 40px 40px 40px; display: none; border-radius: 4px; }
.products-popup img { position: relative; margin: 0 0 20px 0; z-index: 10; border-radius: 4px; }
.products-popup .info { margin-top: 20px; }
.products-popup .section-title, .products-popup .info { opacity: 0; -webkit-transition-property: transform, opacity; -webkit-transition-duration: .4s; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: transform, opacity; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -o-transition-duration: .4s; transition-duration: .4s; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
.products-popup .section-title { padding-right: 60px; }
.products-popup .primary-btn { opacity: 0; border-radius: 4px; }
.products-popup .fancybox-close-small { background-color: #000000; color: #0B8040; opacity: 1; }
.products-popup .fancybox-close-small:hover { background-color: #0B8040; color: #000000; }
/* Final state */
.fancybox-slide--complete .products-popup .section-title, .fancybox-slide--complete .products-popup .info { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
.fancybox-slide--complete .products-popup .primary-btn { opacity: 1; }
/* Reveal content with different delays */
.fancybox-slide--complete .products-popup .info { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.fancybox-slide--complete .products-popup .primary-btn { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; }
/*---------- TICKER ----------*/
#ticker { background-color: #effdf5; height: 58px; overflow: hidden; border-top: 1px solid #fff; }
#ticker .wrapper { display: table; height: 100%; overflow: hidden; table-layout: fixed; color: #000000; }
#ticker .col { display: table-cell; vertical-align: middle; }
#ticker .col.left { width: 110px; }
#ticker .col.right { padding-left: 20px; overflow: hidden; }
#ticker .label { display: block; font-weight: bold; font-size: 24px; text-transform: uppercase; }
#ticker .tickercontainer { height: auto !important; color: #000000; overflow: hidden; }
#ticker .tickercontainer .mask { position: relative; overflow: hidden; width: 100%; }
#ticker #forex-ticker li { font-size: 20px; font-weight: normal; display: inline-block; vertical-align: top; padding: 0 10px !important; }
#ticker #forex-ticker .currency { font-weight: bold; }
/*---------- FOOTER ----------*/
.footer-search { padding: 40px 20px; max-width: 1000px; margin: 0 auto; }
.footer-search .input-wrapper { position: relative; }
.footer-search .input-wrapper input {
border: 1px solid #30120B;
display: block;
margin: 0;
padding: 0 90px 0 36px;
height: 70px;
color: #fff;
width: 100%;
font-family: 'zwo', sans-serif;
font-weight: normal;
border-radius: 5px;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.footer-search::-webkit-input-placeholder { color: #1A1818; opacity: 1; }
.footer-search::-moz-placeholder { color: #1A1818; opacity: 1; }
.footer-search:-moz-placeholder { color: #1A1818; opacity: 1; }
.footer-search:-ms-input-placeholder { color: #1A1818; opacity: 1; }
.footer-search .input-wrapper input:focus { border-color: #0B8040; }
.footer-search .input-wrapper button {
display: block;
border: 0 none;
background-color: #000000;
border-radius: 5px;
width: 60px;
height: 60px;
cursor: pointer;
color: #ffffff;
position: absolute;
right: 5px;
top: 5px;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.footer-search .input-wrapper button:hover {
background-color: #0B8040;
color: #000000;
}
footer .top-section { background: url("../images/sky2.png") bottom center repeat-x; height: 250px;margin-bottom:-5px; }
footer .links-section { background-color: #0B8040; padding: 20px 0 0 0; padding: 0 100px; }
.footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; color: #000000; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.footer-links .links-block { margin: 30px 0; padding-left: 60px; }
.footer-links .links-block:first-child { padding-left: 0px; }
.footer-links h3 { color: #fff; font-weight: bold; margin-bottom: 15px; }
.footer-links ul li { line-height: 1.6;color: #fff; }
.footer-links a { color: #fff; }
.footer-links a:hover { text-decoration: underline; }
footer .bottom-section { background-color: #000000; color: #fff; padding: 15px 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
footer .copyright { line-height: 1.4; }
footer .right-col { text-align: right; }
footer .social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
footer .social a { display: block; width: 32px; height: 32px; line-height: 32px; margin: 4px 5px; color: #fff; text-align: center; }
footer .social a:hover { color: #0B8040; }
footer .terms { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
footer .terms a { display: block; color: #fff; margin-left: 20px; }
footer .terms a:hover { text-decoration: underline; }
.back-to-top { width: 53px; height: 53px; position: fixed; bottom: 30px; right: 30px; background-color: #fff; line-height: 53px; font-size: 28px; color: #000000; text-align: center; opacity: 0; visibility: hidden; z-index: 100; border-radius: 4px; -webkit-box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.16); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { color: #0B8040; }
/*---------- MEDIA QUERIES ----------*/
@media only screen and (max-width:1670px) {
header .top-section { padding: 0 20px; }
.main-search .tbl { padding: 0 60px; }
header .btn-search.search-form-visible { -webkit-transform: translateX(-70px); -ms-transform: translateX(-70px); transform: translateX(-70px); }
header .bottom-section, footer .links-section { padding: 0 40px; }
footer .bottom-section { padding: 15px 40px; }
.banner { height: 640px; }
.banner .content.block { max-width: 530px; }
.banner .content.block p { font-size: 32px; }
.section-title, .statistics .value { font-size: 46px; }
.section-title.secondary { font-size: 36px; }
.statistics-wrapper .section-title { font-size: 38px; }
.statistics-section { margin-top: -132px; }
.statistics .icon { width: 70px; height: 70px; line-height: 70px; font-size: 70px; }
.statistics .label { font-size: 22px; }
.quick-links a, .product-quick-links a { padding: 20px 50px; }
.leadership { margin: -30px 0 0 -30px; padding-top: 20px; }
.leadership > li { width: 25%; padding: 30px 0 0 30px; }
.leadership .name { font-size: 20px; }
.two-col-summary .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 440px; flex: 0 0 440px; }
#ticker .label { font-size: 20px; }
#ticker #forex-ticker li { font-size: 16px; }
.app-wrapper .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 68%; flex: 0 0 68%; }
.page-summary .wrapper .col.left { max-width: 900px; }
.product-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 500px; flex: 0 0 500px; }
.lead-form { padding: 34px 40px; }
.page-summary .wrapper .col.right { width: 500px; }
.loan-calculator { padding-right: 320px; }
.loan-calculator .results { width: 300px; padding: 20px 30px; }
.tabs { padding-bottom: 10px; }
.tabs a { font-size: 28px; }
.news { margin: -40px 0 0 -40px; }
.news .item { padding: 40px 0 0 40px; }
.editor h2 { font-size: 22px; }
.article-meta { font-size: 15px; }
.article-layout .editor p:first-child:first-letter { font-size: 54px; line-height: 0.9; }
.support-contacts .contact { font-size: 26px; }
.support-layout .content-block { padding: 42px 50px 50px 50px; }
.support-layout .col.left { padding-right: 8%; }
.support-contacts li { padding: 14px 0; }
.thank-you p { font-size: 22px; }
}
@media only screen and (max-width:1470px) {
.wrapper { padding: 0 40px; }
header .top-section .secondary-nav li { padding-left: 40px; }
#main_nav a { padding: 0 26px; font-size: 16px; }
#main_nav a.active:after { height: 4px; }
header .top-section { padding: 0 10px; }
header .sub-nav-wrapper .sub-nav > li > a { font-size: 16px; }
header .bottom-section, footer .links-section { padding: 0 30px; }
.banner { height: 450px; }
.banner .content.block { max-width: 490px; }
.banner .content.block p { font-size: 28px; }
.banner .content.block .section-title:before { width: 6px; }
.small-title { font-size: 22px; }
.section-title, .statistics .value { font-size: 42px; }
.section-title.secondary { font-size: 32px; }
.statistics-wrapper .section-title { font-size: 34px; margin-bottom: 20px; }
.values > li { padding: 0 40px; }
.statistics-section { margin-top: -121px; }
.statistics .icon { width: 50px; height: 50px; line-height: 50px; font-size: 50px; }
.statistics .label { font-size: 20px; }
.statistics-wrapper .col.right { padding: 0 100px; }
.statistics-wrapper { padding: 0 0 0 50px; }
.footer-search .input-wrapper input, .search-form .input-wrapper input { font-size: 24px; height: 60px; }
.footer-search .input-wrapper button, .search-form .input-wrapper button { width: 60px; height: 60px; }
.quick-links a, .product-quick-links a { padding: 20px 40px; }
.quick-links .text, .product-quick-links .text { font-size: 16px; }
.quick-links .icon, .product-quick-links .icon { width: 34px; height: 34px; line-height: 34px; font-size: 34px; }
.content-wrapper { padding: 40px 0; }
.content-wrapper.margin-top { margin-top: 40px; }
.back-to-top { right: 20px; width: 40px; height: 40px; line-height: 40px; font-size: 24px; bottom: 90px; }
footer .bottom-section { padding: 15px 30px; }
.two-col-summary .col.right { padding-left: 40px; }
.two-col-summary .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 400px; flex: 0 0 400px; }
#ticker { height: 48px; }
#ticker .label { font-size: 16px; }
#ticker #forex-ticker li { font-size: 12px; }
#ticker .col.left { width: 80px; }
.documents .title { font-size: 16px; }
.featured-products .small-title, .featured-news .small-title { margin-bottom: 12px; }
.featured-products p, .featured-news p { font-size: 16px; }
.app-wrapper .col.left { padding-right: 120px; -webkit-box-flex: 0; -ms-flex: 0 0 64%; flex: 0 0 64%; }
.app-wrapper .app-download a { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; }
.banner #breadcrumbs { left: 40px; }
.product-quick-links .content-wrapper { padding-bottom: 20px; }
.product-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 450px; flex: 0 0 450px; }
.lead-form { padding: 30px; }
.page-summary .wrapper .col.left { max-width: 834px; }
.benefits { margin: -20px 0 0 -30px; }
.benefits li { padding: 30px 0 0 30px; }
.benefits .icon { width: 50px; }
.benefits .title { font-size: 16px; }
.benefits p { font-size: 14px; }
.product-layout .col.left { padding-right: 60px; }
.page-summary .wrapper .col.right { width: 450px; }
.cards-slider { max-width: 260px; }
.comparison-table td { font-size: 16px; }
.comparison-table th, .comparison-table td { padding: 10px 20px; }
.loan-calculator { padding: 24px; padding-right: 280px; }
.loan-calculator .field { padding: 0 10px; }
.loan-calculator form { margin-left: -10px; }
.loan-calculator .results { width: 260px; }
.loan-calculator .alert-msg { margin-right: 10px; }
.accordion .title:after { width: 24px; height: 24px; line-height: 21px; font-size: 16px; border-width: 1.5px; }
.tabs { padding-bottom: 0; }
.tabs a { font-size: 24px; }
.tabs a:before { width: 6px; height: 6px; left: -29px; }
.news { margin: -30px 0 0 -30px; }
.news .item { padding: 30px 0 0 30px; }
.content-wrapper.overlap { margin-top: -130px; }
.content-wrapper.has-overlap { padding-bottom: 90px; }
.article-banner { margin: 20px 0 30px; }
.support-layout .content-block { padding: 40px; }
.support-contacts .contact { font-size: 18px; }
.support-contacts .star { font-size: 40px; }
.support-contacts .contact .icon { margin-right: 10px; }
.thank-you p { font-size: 20px; }
.error-page .pic { max-width: 360px; }
.error-page .section-title { font-size: 94px; }
.main-search input[type="search"] { font-size: 2rem; }
.main-search .tbl { padding: 0 40px; }
.article-layout .col.left { padding-right: 60px; }
.article-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 350px; flex: 0 0 350px; }
.medium-title { font-size: 28px; margin-bottom: 14px; }
.vehicle-info span { font-size: 14px; }
.vehicle-info .label { font-size: 18px; margin-bottom: 4px; }
.vehicle-info li { padding-left: 34px; }
.vehicle-info li:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; }
.related-vehicles { margin: -20px 0 0 -20px; }
.related-vehicles li { padding: 20px 0 0 20px; }
.related-vehicles h4 { font-size: 16px; }
.related-vehicles .info { font-size: 14px; }
.vehicle-details .widget { padding: 20px 24px; }
.ethics-list .title { font-size: 22px; }
}
@media only screen and (max-width:1300px) {
header .bottom-section { height: 72px; }
header .bottom-section .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; }
header .top-section .secondary-nav li { padding-left: 20px; }
header .top-section .secondary-nav a { font-size: 12px; }
#main_nav a { font-size: 14px; padding: 0 24px; }
#main_nav .btn-location { padding: 0 16px; }
header .sub-nav-wrapper .sub-nav > li > a { font-size: 14px; }
.section-title, .statistics .value { font-size: 34px; }
.section-title.secondary { font-size: 26px; }
.quick-links-wrapper { margin-top: -50px; }
.quick-links { height: 100px; }
.quick-links .icon, .product-quick-links .icon { width: 28px; height: 28px; line-height: 28px; font-size: 28px; }
.quick-links .text, .product-quick-links .text { font-size: 14px; }
.small-title { font-size: 18px; }
.values > li { padding: 0 30px; -webkit-box-flex: 0; -ms-flex: 0 0 380px; flex: 0 0 380px; }
.statistics-section { margin-top: -95px; }
.statistics-wrapper { padding: 0 0 0 40px; }
.statistics-wrapper .section-title { font-size: 28px; margin-bottom: 14px; }
.statistics-wrapper .col.right { padding: 0 60px; }
.statistics li { padding: 40px 20px; }
.statistics .label { font-size: 18px; }
.statistics .icon { width: 40px; height: 40px; line-height: 40px; font-size: 40px; margin-bottom: 14px; }
.footer-search { max-width: 800px; }
.footer-search .input-wrapper input, .search-form .input-wrapper input { font-size: 22px; padding: 0 80px 0 20px; height: 50px; }
.footer-search .input-wrapper button, .search-form .input-wrapper button { width: 60px; height: 50px; }
.footer-links .links-block { padding-left: 40px; }
.quick-links a, .product-quick-links a { padding: 20px 30px; }
.leadership .name { font-size: 18px; margin-top: 14px; }
.leadership .designation { font-size: 14px; }
.two-col-summary .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 350px; flex: 0 0 350px; }
.filter { margin: 0 0 20px -30px; }
.filter > li { padding: 0 0 0 30px; }
.documents { margin: -30px 0 0 -30px; }
.documents > li { padding: 30px 0 0 30px; }
.branches { margin: -30px 0 0 -30px; }
.branches > li { padding: 30px 0 0 30px; }
.branches .block { padding: 24px 24px 60px 24px; font-size: 14px; }
.branches ul li { padding-left: 28px; }
.branches ul li:before { width: 16px; height: 16px; line-height: 16px; font-size: 14px; }
.primary-btn { font-size: 18px; padding-left: 24px; }
.contact-btn { padding-right: 24px; }
.contact-btn span { font-size: 18px; }
.link-btn { font-size: 18px; }
.banner .content.block { padding: 30px 32px; max-width: 380px; }
.banner .content.block .section-title:before { left: -32px; }
.banner .content.block p { font-size: 20px; }
.featured-products .small-title, .featured-news .small-title { margin-bottom: 8px; }
.featured-products p, .featured-news p { font-size: 14px; }
.app-wrapper .col.left { padding-right: 100px; -webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; }
.page-summary .wrapper .col.left { max-width: 800px; }
.product-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 380px; flex: 0 0 380px; }
.lead-form { padding: 24px; }
.lead-form .label { font-size: 16px; }
.lead-form .textbox { font-size: 16px; }
.benefits .block { padding: 20px 14px; }
.benefits .icon { margin-bottom: 12px; }
.benefits .title { font-size: 14px; margin-bottom: 10px; }
.benefits p { font-size: 12px; }
.page-summary .wrapper .col.right { width: 380px; }
.comparison-table td { font-size: 14px; }
.loan-calculator .label, .loan-calculator .textbox, .loan-calculator .input-wrapper label, .loan-calculator .results .title { font-size: 16px; }
.loan-calculator button { font-size: 18px; }
.accordion .desc { font-size: 14px; }
.tabs a { font-size: 20px; }
.editor h2 { font-size: 20px; }
.article-meta { font-size: 13px; }
.article-layout .editor p:first-child:first-letter { font-size: 52px; line-height: 0.8; }
.medium-title { font-size: 24px; }
footer .terms { font-size: 12px; }
.text-blocks .block { -webkit-box-flex: 0; -ms-flex: 0 0 400px; flex: 0 0 400px; }
.text-blocks .icon { width: 46px; height: 46px; line-height: 46px; font-size: 46px; }
.natbank-products .block { padding: 18px 18px 77px 18px; height: 170px; }
.natbank-products .btn-wrapper { padding: 18px; }
.natbank-products a { font-size: 16px; line-height: 38px; }
}
@media only screen and (max-width:1100px) {
.btn-menu { display: -webkit-box; display: -ms-flexbox; display: flex; }
#mobile_nav_wrapper { display: block; }
header .top-section, #main_nav { display: none; }
header .bottom-section { padding-right: 0; }
.banner { height: 400px; }
.section-title, .statistics .value { font-size: 30px; }
.section-title.secondary { font-size: 22px; }
.content-wrapper { padding: 30px 0; }
.content-wrapper.margin-top { margin-top: 30px; }
.content-wrapper.small-padding { padding: 25px 0; }
.text-blocks { margin-left: -40px; }
.text-blocks .block { padding: 50px 0 0 40px; -webkit-box-flex: 0; -ms-flex: 0 0 320px; flex: 0 0 320px; }
.values > li { -webkit-box-flex: 0; -ms-flex: 0 0 280px; flex: 0 0 280px; }
.small-title { margin-bottom: 12px; }
.statistics-wrapper .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 340px; flex: 0 0 340px; }
.statistics .label { font-size: 16px; }
footer .social { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; }
.footer-search { max-width: 640px; }
.leadership > li { width: 33.33%; }
.two-col-summary { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 0; }
.two-col-summary .col.left { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; }
.two-col-summary .col.right { padding: 0; }
.documents .title { font-size: 14px; }
.page-summary { padding: 20px 0; }
.page-summary .wrapper { margin-top: 0; }
.page-summary .wrapper .col.left { padding-right: 0; max-width: 590px; }
#breadcrumbs { margin-bottom: 20px; }
.banner #breadcrumbs { top: 10px; }
.timeline .year { font-size: 44px; margin-top: -30px; }
.timeline .block .timeline-content { margin-top: -160px; }
.app-wrapper .col.left { padding-right: 80px; }
.product-quick-links .content-wrapper { padding-bottom: 10px; }
.product-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 350px; flex: 0 0 350px; }
.related-products, .related-products .col { display: block; }
.related-products .col.left { width: 100%; padding: 0; }
.product-layout .col.left { padding-right: 40px; }
.benefits { margin: -10px 0 0 -20px; }
.benefits li { padding: 20px 0 0 20px; }
.benefits .icon { width: 40px; }
.page-summary .wrapper .col.right { width: 350px; }
.cards-slider { max-width: 240px; }
.loan-calculator { padding: 20px 10px; }
.loan-calculator form { margin-left: 0; }
.loan-calculator .results { position: relative; top: -40px; right: auto; margin: 10px auto 0 auto; padding: 30px 20px 20px 20px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
.loan-calculator .results.show { right: auto; top: 0; }
.loan-calculator .results:before { left: 0; right: 0; top: -11px; bottom: auto; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.loan-calculator .alert-msg { margin-left: 10px; }
.accordion .title { padding: 16px 62px 16px 16px; }
.accordion .title:after { right: 16px; }
.tabs { padding-top: 10px; }
.tabs a { margin: 0 18px; padding: 12px; }
.tabs a:before { left: -21px; }
.content-wrapper.overlap { margin-top: -100px; }
.content-wrapper.has-overlap { padding-bottom: 60px; }
.article-layout { padding: 0; }
.editor h2 { font-size: 18px; }
.article-banner .caption { font-size: 10px; }
.contacts li { padding: 10px 14px; }
.support-layout .col.left { padding-right: 4%; }
.support-layout .content-block { padding: 30px; }
.thank-you { margin-top: 0; }
.thank-you .icon { font-size: 100px; margin-bottom: 20px; }
.thank-you p { margin-bottom: 30px; }
.error-page { margin-top: 0; }
.error-page .pic { max-width: 300px; }
.error-page .section-title { font-size: 80px; }
.error-page p { font-size: 26px; }
header .bottom-bar { display: none; }
.main-search .tbl { padding: 0 30px; }
.main-search input[type="search"] { font-size: 1.6rem; padding-right: 90px; }
header .btn-search.search-form-visible { width: 40px; height: 40px; font-size: 18px; }
.main-search .btn-search-close { width: 40px; height: 40px; font-size: 22px; right: 10px; }
header .btn-search.search-form-visible { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); }
.text-blocks.quarter .block { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; }
.article-layout .col.left { padding-right: 40px; }
.article-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; padding: 16px 20px; }
.medium-title { font-size: 20px; margin-bottom: 6px; }
.tenders > li { margin-top: 20px; }
.vehicle-info li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.related-vehicles { margin-top: -10px; }
.page-summary.ethics .wrapper .col.left { padding-right: 40px; max-width: none; }
.page-summary.ethics .wrapper .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; }
.ethics-list li { width: 100%; }
.natbank-products .block { height: 150px; }
/*---------- MISSION VISION LAYOUT ----------*/
.our-mission-vision {
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: 20px;
margin-top: 30px;
}
}
@media only screen and (max-width:870px) {
.wrapper { padding: 0 30px; }
.quick-links a, .product-quick-links a { padding: 20px 26px; }
.text-blocks .block { -webkit-box-flex: 0; -ms-flex: 0 0 240px; flex: 0 0 240px; }
.values > li { -webkit-box-flex: 0; -ms-flex: 0 0 230px; flex: 0 0 230px; }
.statistics-section { margin-bottom: 30px; }
.statistics-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px 30px 0 30px; }
.statistics-wrapper .col.left { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; text-align: center; }
.statistics-wrapper .col.right { padding: 0; }
.footer-search { padding: 30px 20px; }
.footer-links .links-block { display: none; }
.footer-links .links-block.hours { display: block; padding-left: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: center; }
.leadership .name { font-size: 16px; }
.leadership .designation { font-size: 14px; }
.profile { padding: 70px 60px 30px 60px; }
.profile h2 { font-size: 22px; }
.profile .designation { font-size: 16px; }
.filter select { padding: 0 12px; }
.documents > li { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.branches .block { padding: 20px 12px 60px 12px; font-size: 12px; }
.branches.vehicles .desc { padding: 20px 12px 0 12px; }
.primary-btn, .link-btn, .contact-btn span { font-size: 16px; }
.primary-btn:after { font-size: 10px; }
.contact-btn:before { font-size: 20px; }
.timeline .year { font-size: 34px; margin-top: -19px; }
#ticker .col.left { width: 60px; }
.banner .content.block { padding: 24px 26px; max-width: 340px; }
.banner .content.block p { font-size: 20px; }
.banner .content.block .section-title:before { left: -26px; width: 5px; }
.featured-products { padding-top: 0; }
.app-wrapper .col.left { padding-right: 40px; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.app-wrapper .app-download { padding-top: 0; }
.app-wrapper .app-download a { -webkit-box-flex: 0; -ms-flex: 0 0 130px; flex: 0 0 130px; }
.product-quick-links { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.product-quick-links .col { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
.banner #breadcrumbs { left: 30px; }
.product-layout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.banner .product-layout { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.product-layout .col.left { padding: 0 0 20px 0; }
.banner .product-layout .col.left { padding: 0 20px 0 0; }
.product-layout .col.right { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
/*---------- MISSION VISION LAYOUT ----------*/
.our-mission-vision {
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: 20px;
margin-top: 30px;
}
.our-mission-vision .item i {
font-size: 48px;
}
.our-mission-vision .item h4 {
font-size: 16px;
line-height: 16px;
}
.banner .product-layout .col.right { -webkit-box-flex: 0; -ms-flex: 0 0 350px; flex: 0 0 350px; }
.lead-form .label, .lead-form .textbox { font-size: 14px; }
.lead-form textarea.textbox { padding: 15px 18px; }
.page-summary .wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.page-summary .wrapper .col.right { width: 100%; padding: 10px 0 0 0; }
.loan-calculator form { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.loan-calculator .field { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0 10px 10px 10px; }
.loan-calculator .label, .loan-calculator .textbox, .loan-calculator .input-wrapper label, .loan-calculator .results .title { font-size: 14px; }
.loan-calculator button { font-size: 16px; }
.loan-calculator .results:before { font-size: 12px; }
.accordion .desc { font-size: 13px; }
.accordion .title:after { width: 20px; height: 20px; line-height: 16.5px; }
.accordion .title { padding: 14px 52px 14px 14px; }
.tabs a { font-size: 18px; }
.featured-news { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.featured-news .col.left { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; margin: 0 0 24px 0; }
.featured-news .col.left .block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.featured-news .pic-wrapper { width: 40%; }
.featured-news .col.left .desc { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 20px; }
.featured-news .col.left .primary-btn { position: relative; }
.news .item { width: 50%; }
.content-wrapper.has-overlap { padding-bottom: 70px; }
.deals-popup { padding: 60px 30px 30px 30px; }
.article-layout .editor p:first-child:first-letter { font-size: 50px; line-height: 0.7; }
.article-meta { font-size: 11px; }
.article-banner { margin-bottom: 24px; }
.contacts li { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; padding: 10px; }
.support-layout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.support-layout .col.left { padding: 0 0 30px 0; }
.support-contacts li { padding: 10px 0; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.support-contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.thank-you p { font-size: 18px; }
.thank-you .icon { font-size: 90px; }
.search-results .block { padding: 20px 70px 20px 20px; }
.search-results .block:after { font-size: 14px; right: 20px; width: 22px; }
.search-results .block:hover:after { right: 16px; }
.bulleted-three-col { -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; -webkit-columns: 2; -moz-columns: 2; columns: 2; }
.article-layout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.article-layout .col.left { padding: 0 0 30px 0; }
.article-layout .featured-products { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 -20px; }
.article-layout .col.right .featured-products .item { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; margin: 0; padding: 10px 0 10px 20px; }
footer .bottom-section { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
footer .right-col { text-align: center; }
footer .social { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
footer .terms { margin-top: 10px; }
footer .terms a { margin: 0 10px; }
footer .copyright { text-align: center; margin-top: 10px; }
.vehicle-info li { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; }
.vehicle-details .section-title-tbl, .vehicle-gallery { margin-bottom: 30px; }
.vehicle-details .section-title-tbl .cell.right { display: block; }
.ethics-list li { width: 50%; }
.page-summary.ethics .wrapper .col.left { padding-right: 0; }
.page-summary.ethics .wrapper .col.right { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; width: 100%; padding: 10px 0 20px 0; }
.statistics li { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; padding: 20px; }
.products-popup { padding: 30px; }
.products-popup .section-title { padding-right: 50px; }
.natbank-products li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.blog-filter { display: none; }
.filter.blog .show-mobile { display: block; }
.filter.blog > li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.blog-recent-articles .news { margin-top: -20px; }
}
@media only screen and (max-width:670px) {
header .bottom-section, footer .links-section { padding: 0 20px; }
header .bottom-section { height: 50px; padding-right: 0; }
header .bottom-section .col.left { -webkit-box-flex: 0; -ms-flex: 0 0 72px; flex: 0 0 72px; }
.btn-menu { width: 50px; font-size: 24px; }
.banner { height: 320px; }
.section-title, .statistics .value { font-size: 26px; }
.section-title.secondary { font-size: 20px; }
.section-title { margin-bottom: 16px; }
.quick-links-wrapper { margin-top: -54px; }
.quick-links { height: auto; }
.quick-links a { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.quick-links .text, .product-quick-links .text { font-size: 12px; }
.text-blocks { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: 0; padding-top: 20px; }
.text-blocks .block { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; padding: 10px 0 0 0; }
.text-blocks .icon { width: 40px; height: 40px; line-height: 40px; font-size: 40px; }
.values { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.values > li { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; }
.small-title { font-size: 16px; }
.statistics-wrapper .section-title { font-size: 24px; }
.footer-search { max-width: 500px; }
footer .bottom-section { padding: 15px 20px 10px 15px; }
footer .social a { width: 40px; height: 40px; line-height: 40px; margin: 10px; }
footer .copyright { text-align: center; }
#mobile_nav_wrapper .header { height: 50px; }
#mobile_nav_wrapper .header .logo { width: 72px; }
.footer-search .input-wrapper input, .search-form .input-wrapper input { font-size: 18px; }
.back-to-top { display: none; }
.leadership > li { width: 50%; }
.profile .info { margin-top: 20px; }
.profile { padding: 50px 30px 30px 30px; }
.profile h2 { font-size: 20px; }
.profile img { width: 160px; }
.documents .title { font-size: 12px; }
.filter > li, .filter.blog > li { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 10px; }
.branches { margin: -30px 0 0 -20px; }
.branches > li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 20px 0 0 20px; }
.page-summary { padding: 10px 0; }
.timeline .block { text-align: left; }
.timeline .block .timeline-content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; padding: 0 0 0 32px; margin-top: 0; }
.timeline .block:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.timeline:before, .timeline .block:after { right: auto; }
.timeline .block:after { left: -1px; }
.timeline .year:after { right: auto; left: -38px; }
.timeline .year:before { right: auto; left: -41px; }
.banner .content.block { max-width: 310px; }
.banner .content.block .section-title { margin-bottom: 6px; }
.banner .content.block p { font-size: 18px; }
.app-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.app-wrapper .col.left { padding: 0 0 10px 0; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; width: 70%; }
.app-wrapper .col.right { text-align: center; }
.app-wrapper .app-download { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.app-wrapper .app-download a { margin: 0 10px; -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; }
.app-wrapper .app-download a:first-child { margin-left: 10px; }
.product-quick-links .section-title { margin-bottom: 0; }
.benefits .icon { width: 32px; }
.benefits .title { margin-bottom: 6px; }
.cards-slider { max-width: 220px; }
table.responsive thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
table.responsive tr { border: 1px solid rgba(190, 190, 190, 0.22); display: block; margin-bottom: .625em; }
table.responsive td { border-bottom: 1px solid rgba(190, 190, 190, 0.22); display: block; font-size: 12px; text-align: right; }
table.responsive td:before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; }
table.responsive td:last-child { border-bottom: 0; }
.comparison-table.responsive tbody tr:nth-child(odd) { background-color: transparent; }
.comparison-table th, .comparison-table td { padding: 10px; }
.featured-products .desc { padding: 17px 20px 0 20px; }
.tabs { display: none; }
.tabs-dd-wrapper { display: block; }
.featured-news .desc { padding: 20px 20px 70px 20px; }
.content-wrapper.overlap { margin-top: -80px; }
.content-wrapper.has-overlap { padding-bottom: 50px; }
.pagination { text-align: center; margin-top: 26px; }
.pagination li { display: none; }
.pagination li.prev, .pagination li.next { display: inline-block; margin: 0 10px; }
.deals-popup, .products-popup { max-width: 92%; }
.share-article a { font-size: 16px; }
.support-layout .content-block { padding: 24px; }
.support-contacts .contact { font-size: 14px; }
.support-contacts .contact .icon { width: 22px; line-height: 22px; }
.support-contacts .star { font-size: 32px; }
.error-page .pic { max-width: 260px; }
.error-page .section-title { font-size: 70px; }
.error-page p { font-size: 22px; }
.accordion.half { display: block; margin: 0; }
.accordion.half li { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; margin: 10px 0 0 0; }
.accordion.half li:first-child { margin-top: 0; }
header .btn-search.search-form-visible { width: 34px; height: 34px; font-size: 14px; }
header .btn-search { width: 50px; font-size: 18px; }
header .btn-search.search-form-visible { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); }
.main-search .tbl { padding: 0 20px; }
.main-search input[type="search"] { font-size: 1.2rem; }
.main-search .btn-search-close { font-size: 20px; }
footer .terms { margin-top: 0; }
.tenders .block { padding: 20px 60px 20px 20px; }
.tenders .block:after { right: 20px; font-size: 16px; }
.tenders .block:hover:after { right: 14px; }
.tenders h2 { font-size: 20px; }
.tender-meta .sep:nth-child(4) { display: none; }
.tender-meta span:last-child { display: block; }
.vehicle-info li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.natbank-products { margin: -20px 0 0 -20px; }
.natbank-products li { padding: 20px 0 0 20px; }
.natbank-products a { font-size: 14px; line-height: 34px; }
.banner .product-layout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.banner .product-layout .col.left { padding: 0 0 30px 0; text-align: center; }
.banner .product-layout .col.right { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
.blog-recent-articles .news .small-title { font-size: 16px; }
/*---------- MISSION VISION LAYOUT ----------*/
.our-mission-vision {
grid-template-columns: repeat(1, 1fr);
column-gap: 0;
row-gap: 20px;
margin-top: 30px;
}
}
@media only screen and (max-width:570px) {
.wrapper { padding: 0 20px; }
.banner { height: 230px; }
.banner .content.block { padding: 20px; max-width: 260px; }
.banner .content.block .section-title:before { left: -20px; width: 3px; }
.banner .content.block p { font-size: 16px; }
.section-title, .statistics .value { font-size: 22px; }
.section-title.secondary { font-size: 18px; margin-bottom: 14px; }
.quick-links { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.quick-links a { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 14px; }
.quick-links a:nth-child(odd):before { display: none; }
.quick-links-wrapper { margin-top: -47px; }
.statistics-section { margin-bottom: 20px; }
.statistics-wrapper .section-title { font-size: 20px; }
.statistics { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.statistics li { padding: 20px; }
.footer-search { padding: 20px; }
.footer-links h3 { font-size: 18px; }
.leadership > li { width: 100%; }
.profile { padding: 50px 20px 20px 20px; }
.profile img { margin: 0 auto 20px auto; float: none; }
.filter.single > li { width: 100%; }
.documents .cell.right { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; }
.documents .action > a, .btn-share { padding: 12px; }
.documents .icon { font-size: 16px; }
.documents .cell.left { padding: 12px 12px 36px 12px; }
.documents .date { padding: 12px; }
.branches > li { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.timeline .block .timeline-content, .timeline .block:nth-child(even) .timeline-content { padding-left: 20px; }
.timeline .year { font-size: 30px; margin-top: -18px; padding: 0 16px; }
.timeline .year:after { width: 11px; height: 11px; }
.timeline .year:after, .timeline .block:nth-child(even) .year:after { left: -25px; }
.timeline .year:before { left: -29px; }
.timeline .block .timeline-content { margin-bottom: 20px; }
#ticker { height: auto; }
#ticker .wrapper { padding: 0; }
#ticker .col { display: block; }
#ticker .col.left { width: 100%; padding: 20px 20px 0 20px; text-align: center; }
#ticker .col.right { padding: 6px 20px 10px 20px; }
.app-wrapper .col.left { width: 100%; }
.mobile-center { text-align: center; }
.banner #breadcrumbs { left: 20px; }
.benefits li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.lead-form { padding: 16px; }
.product-layout .col.left { padding-bottom: 10px; }
.product-details .cell.left { padding-right: 0; }
.loan-calculator .field { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.loan-calculator .results { width: auto; margin: 0 10px; }
.loan-calculator .label.spacer { display: none; }
.featured-news .pic-wrapper { width: 100%; }
.news { margin: -26px 0 0 -26px; }
.news .item { width: 100%; padding: 26px 0 0 26px; }
.deals-popup { padding: 60px 20px 20px 20px; max-width: none; }
.article-layout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.editor h2 { font-size: 16px; }
.share-article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.share-article a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; line-height: 40px; }
.support-layout .content-block { padding: 20px; }
.support-layout .col.left { padding: 0 0 20px 0; }
.support-contacts li { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 6px 0; }
.thank-you p { font-size: 16px; }
.thank-you .icon { font-size: 70px; }
.search-results .block { padding: 14px 50px 14px 14px; }
.search-results .block:after { font-size: 12px; right: 16px; width: 18px; }
.search-results .block:hover:after { right: 12px; }
.search-results > li { margin-top: 20px; }
.main-search input[type="search"] { padding-right: 80px; }
.bulleted-three-col { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-columns: 1; -moz-columns: 1; columns: 1; }
.article-layout .col.right .featured-products .item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.share-article-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.share-article-wrapper .label { margin-right: 0; font-size: 14px; }
footer .terms { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
footer .terms a { margin: 0; padding: 5px 0; }
.tender-meta span { display: block; }
.tender-meta .sep { display: none; }
.tenders h2 { font-size: 18px; }
.vehicle-info li { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.vehicle-info .label { font-size: 16px; }
.related-vehicles li { width: 100%; }
.vehicle-details .widget { padding: 18px 16px; }
.page-summary.ethics .wrapper .col.right { padding: 10px 0; }
.ethics-list li { width: 100%; }
.products-popup { padding: 20px; max-width: none; }
.natbank-products li { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.news .meta { padding-bottom: 16px; }
.article-layout .meta { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.article-layout .meta .news-category { margin-bottom: 20px; }
}
.content-wrapper {
color: #000000;
}
.content-in-unchanging h2{
font-size: 30px;
font-weight: bold;
}
.content-in-unchanging1 h2{
font-size: 21px;
font-weight: bold;
}
.tab-content-wrapper .tab-pane h3{
font-size: 24px;
font-weight: 700;
letter-spacing: 0;
text-align: left;
margin: 10px 0;
}
.tab-content-wrapper .tab-pane > p{
font-size: 16px;
font-weight: 400;
line-height: normal;
letter-spacing: normal;
text-align: left;
}
.tab-content-wrapper .tab-pane .in-divs{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.tab-content-wrapper .tab-pane .in-divs .in-small-divisions{
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
border-radius: 15px;
background: rgba(246, 242, 242, 1);
margin-top: 25px;
padding: 25px;
height: 186px;
width: 240px;
}
.tab-content-wrapper .tab-pane .in-divs .in-small-divisions p {
text-align: center;
font-size: 16px;
}
.tab-content-wrapper .tab-pane .in-small-divisions img{
height: auto;
width: auto;
margin:20px 30%;
}
.tab-content-wrapper .tab-pane .in-small-divisions span{
font-size: 18px
}
.tab-content-wrapper .tab-pane .list-of-eligables{
display: flex;
flex-wrap:wrap;
font-size: 18px;
}
.tab-content-wrapper .tab-pane .list-of-eligables section{
width:49%;
margin: 15px 0;
}
.tab-content-wrapper .tab-pane .list-of-eligables section ul{
padding-left:27.5px ;
}
.tab-content-wrapper .tab-pane li{
list-style: initial !important;
}
.tab-content-wrapper .tab-pane .in-small-divisions2{
width: calc(50% - 10px);
height: auto;
border-radius: 15px;
background: rgba(246, 242, 242, 1) !important;
margin-top: 25px;
padding: 20px;
}
.tab-content-wrapper .tab-pane .in-small-divisions3{
width: calc(50% - 10px);
border-radius: 15px;
background: rgba(246, 242, 242, 1) !important;
margin-top: 25px;
justify-content: center;
padding: 20px;
}
.tab-content-wrapper .tab-pane .in-small-divisions3 ul{
list-style: initial;
}
.tab-content-wrapper .tab-pane .in-small-divisions3 h4{
font-size: 20px;
margin: 15px 0 10px 0;
}
.tab-content-wrapper .tab-pane .menu3-list {
padding-left: 30px;
}
.tab-content-wrapper .tab-pane .menu1-list, .tab-content-wrapper .tab-pane .in-small-divisions3 ul{
padding-left: 20px !important;
}
.tab-content-wrapper .tab-pane .menu3-list li{
margin: 20px 0px;
}
.tab-content-wrapper .tab-pane .numbering{
box-sizing: border-box;
width: 47px;
height: 47px;
border: 2px solid #000000;
border-radius: 50%;
text-align: center;
padding: 10px 0;
font-style: normal;
font-weight: 700;
font-size: 20px;
}
.bottom-pagination{
display: flex;
list-style: none;
width: 175px;
justify-content: space-between;
padding: 0px;
float: right;
margin-right: 100px;
}
.bottom-pagination li{
background: #F6F2F2;
padding:7.5px;
font-weight: bold;
}
/*.nav:after,*/
/*.nav:before {*/
/* content:"";*/
/* display: table;*/
/*}*/
/*.nav:after {*/
/* clear:both;*/
/* overflow:hidden;*/
/*}*/
.majiKonnect .nav {
margin:30px 0;
display: grid;
align-items: center;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
/*justify-content: space-between;*/
/*flex-direction: row;*/
flex-flow: wrap;
}
.nav li {
list-style: none outside none;
/*float: left;*/
position: relative;
}
.nav .active {
z-index: 3;
}
/*.nav li:before,*/
/*.nav li:after,*/
/*.nav a:before,*/
/*.nav a:after {*/
/* content:"";*/
/* position: absolute;*/
/* bottom:0;*/
/*}*/
/*.nav li:before,*/
/*.nav li:after {*/
/* background: #000000;*/
/* width: 10px;*/
/* height: 10px;*/
/*}*/
/*.nav li:before {*/
/* left: -10px;*/
/*}*/
/*.nav li:after {*/
/* right: -10px;*/
/*}*/
.nav a {
display: block;
padding: 10px 30px;
text-decoration: none;
color: white;
background: linear-gradient(89.86deg, #240D08 30.09%, #000000 92.29%);
border-radius: 10px 10px 0 0;
font-weight: 900;
text-align: center;
width: 100%;
}
.nav .active a, .nav a:hover {
background: linear-gradient(89.86deg, #0B8040 30.32%, #0B8040 93%);
color:#fff;
}
.nav a:before{
width: 20px;
height: 20px;
border-radius: 10px;
background: #000000;
z-index: 2;
}
.nav a:after {
width: 20px;
height: 20px;
border-radius: 10px;
background: #210C07;
z-index: 2;
}
.nav .active a:before
{
background: #000000;
}
.nav .active a:after {
background: #210C07;
}
.nav a:before {
left:-20px;
}
.nav a:after {
right: -20px;
}
.nav .active:before,
.nav .active:after {
z-index: 1;
background: #0B8040;
}
.nav li:first-child a:before,
.nav li:last-child a:after {
background-color: #fff;
}
.majiKonnect .pagination {
display: flex !important;
justify-content: center;
}
.majiKonnect .pagination li {
display: block !important;
}
/** Cookie alert **/
.info-policy {
background-color: #000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 9999999999;
}
.info-policy_text {
-webkit-box-flex: 1;
-ms-flex: 1 0 80%;
flex: 1 0 80%;
}
.info-policy_text p {
color: #fff;
font-size: .95rem;
}
.info-policy_text p a {
padding-bottom: .25rem;
color: #0B8040;
border-bottom: 2px solid #0B8040;
}
.info-policy_btn button {
text-align: center;
padding: 0 1.875rem;
}
.info-policy_btn button:after {
content: "\e90f";
display: none !important;
}
@media only screen and (max-width: 1024px) {
.info-policy {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.info-policy_text {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.info-policy_btn {
padding-left: 0;
padding-right: 0;
padding-top: .5rem;
}
}
@media only screen and (max-width:768px) {
.tab-content-wrapper .tab-pane .in-divs {
display: grid;
align-items: flex-start;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
}
.tab-content-wrapper #menu1.tab-pane .in-divs, .tab-content-wrapper #menu2.tab-pane .in-divs{
display: grid;
align-items: flex-start;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 10px;
}
.tab-content-wrapper .tab-pane .in-divs .in-small-divisions {
width: 230px;
}
.tab-content-wrapper .tab-pane .in-small-divisions2, .tab-content-wrapper .tab-pane .in-small-divisions3 {
width: 100%;
}
}
@media only screen and (max-width:670px) {
.nav {
margin-left: 0;
}
.content-wrapper.dark{
width: 100%;
}
.nav:after, .nav:before {
content: "";
display: none;
}
.nav li:before, .nav li:after, .nav a:before, .nav a:after {
content: unset;
}
.nav li {
/*width: 50%;*/
margin-top: 5px;
}
/*.nav li:first-child {*/
/* padding-right: 5px;*/
/*}*/
/*.nav li:nth-child(3) {*/
/* padding-right: 5px;*/
/*}*/
.nav li a {
float: none;
text-align: center;
padding: 10px 20px;
display: block;
border-radius: unset;
width: 100%;
}
.tab-content-wrapper .tab-pane .in-small-divisions{
width: 100%;
}
.majiKonnect .nav {
grid-template-columns: repeat(2, 1fr);
}
.majiKonnect .nav li {
width: 100%;
}
}
@media only screen and (max-width:500px){
.tab-content-wrapper .tab-pane .in-divs {
grid-template-columns: repeat(2, 1fr);
}
.tab-content-wrapper .tab-pane .in-divs .in-small-divisions {
width: 190px;
padding: 15px;
}
.tab-content-wrapper #menu1.tab-pane .in-divs, .tab-content-wrapper #menu2.tab-pane .in-divs{
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width:375px){
.majiKonnect .nav {
grid-template-columns: repeat(1, 1fr);
}
.tab-content-wrapper .tab-pane .in-divs {
grid-template-columns: repeat(1, 1fr);
}
.tab-content-wrapper .tab-pane .in-divs .in-small-divisions {
width: 100%;
padding: 25px;
}
}