/* 1* FONTS 2* INITIAL RESETS 2.1* SELECTION 2.2* SCROLLBAR 2.3* TRANSITIONS 3* LINKS 4* TYPOGRAPHY 5* LAYOUT STYLES 6* MISC RESETS 7* SWITCH COLOURS 8* FONT-WEIGHT RESETS 9* PADDING RESETS 10* MARGIN RESETS 11* FOOTER */ /*--------------1* FONTS------------*/ a#navBtn { display: none; } /*--------------2* INITIAL RESETS------------*/ /*----2.1* SELECTION----*/ *::-moz-selection { background:#CCD9E4; color: #000; } *::-webkit-selection { background:#CCD9E4; color: #000; } *::-ms-selection { background:#CCD9E4; color: #000; } *::selection { background: #CCD9E4; color: #000; } /*----2.2* SCROLLBAR----*/ ::-webkit-scrollbar { display: none; } ::-ms-scrollbar { display: none; } ::-moz-scrollbar { display: none; } ::scrollbar { display: none; } body::-webkit-scrollbar { height: 0px; width: 0px; background: transparent; } @-moz-document url-prefix() { html { scrollbar-width: none; } } .scroll-col::-webkit-scrollbar, body::-webkit-scrollbar , iframe::-webkit-scrollbar { width: 10px; display: block; } .scroll-col::-webkit-scrollbar-track, body::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track { box-shadow: inset 1px 1px 5px #ccc; border-radius: 20px; background: rgba(70, 2, 52, 0.15); } .scroll-col::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb { background: #3189CF; border-radius: 10px; max-height: 5px; height: 30px; margin: 45px; padding: 30px; } .scroll-col::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, iframe::-webkit-scrollbar-thumb:hover { background: rgba(70, 2, 52, 0.75); } /*----2.3* TRANSITIONS----*/ /**:not(nav):not(body):not(html) { scroll-behavior: smooth; transition: .4s linear all; -moz-transition: .4s linear all; -webkit-transition: .4s linear all; -ms-transition: .4s linear all; }*/ html { position: absolute; height: 100%; scrollbar-width: none; -ms-overflow-style: none; /* IE 11 */ width: 100%; scroll-behavior: smooth; } body { overflow: auto; line-height: 1.6; height: 100%; scrollbar-width: none; scroll-behavior: smooth; } body, input:not(.zoom_query):not(.zoom_button):not(.zoom_searchbox):not(#zoom_match_any):not(#zoom_match_all), select, textarea, button, tspan { font-family: 'Roboto'; } hr { width: 100% } input:not(.zoom_query):not(.zoom_button):not(.zoom_searchbox):not(#zoom_match_any):not(#zoom_match_all), input:focus:not(.zoom_query):not(.zoom_searchbox):not(.zoom_button):not(#zoom_match_any):not(#zoom_match_all), select, select:focus { outline: none; border: 0; } /*--------------3* LINKS------------*/ a, a:focus { color: #2E8ED3; text-decoration: none; outline: 0; font-weight: normal; transition: .25s linear all; } a:hover { text-decoration: none; color: #fff; /*font-weight: bold!important;*/ transition: .25s linear all; } .toTopArrow { width: 35px; height: 35px; z-index: 999; position: fixed; bottom: 15px; right: 15px; cursor: pointer; } .toTopArrow img { opacity: 0.5; } /*--------------4* TYPOGRAPHY------------*/ h1 {font-size: 56px; margin: 0; padding: 0; line-height: 64px; font-weight:normal;} h2 {font-size: 40px; margin: 0;padding: 0; line-height: 48px; font-weight:normal;} h3 {font-size: 32px; margin: 0;padding: 0; line-height: 40px; font-weight:normal;} h4 {font-size: 24px;margin: 0;padding: 0; line-height: 32px; font-weight:normal;} h5 {font-size: 20px;margin: 0;padding: 0; line-height: 28px; font-weight:normal;} .general-banner {} .general-banner div {display:block;width:40%;box-sizing:border-box;padding-left:64px;transform: translateY(50%);float: left;} .general-banner h1 {margin-bottom:48px;font-weight: 300;color:#000;} .general-banner h2 {font-weight: 300;color: #fff;} .general-banner p {margin-bottom:32px; font-weight:700;} .at-a-glance-banner {background-image:url(../images/at-a-glance/at-a-glance-banner-new.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .why-invest-banner {background-image:url(../images/why-invest/why-invest-banner.png); min-height:627px; background-repeat:no-repeat; background-size:cover;} .investor-banner {background-image:url(../images/investor-centre/investor-banner-new.jpg); min-height:628px; background-repeat:no-repeat; background-size:cover;} .history-banner {background-image:url(../images/history/history-banner-new.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .leadership-banner {background-image:url(../images/leadership/leadership-banner-new.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .strategy-banner {background-image:url(../images/strategy/strategy-banner.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .sustainability-banner {background-image:url(../images/sustainability/sustainability-banner-new.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .dedicated-banner {background-image:url(../images/sustainability/dedicated-banner.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .foundation-banner {background-image: url(../images/foundation/foundation-banner-new.jpg); min-height: 500px; background-repeat: no-repeat; background-size: cover;} .future-growth-banner {background-image:url(../images/investor-centre/future-growth-banner.jpg); min-height:365px; background-repeat:no-repeat; background-size:cover;} .adr-banner {background-image: url(../images/adr-holders/adr-banner.jpg); min-height: 400px; background-repeat: no-repeat; background-size: cover;} .figures-strip {background-image:url(../images/at-a-glance/figures-strip-new.png);min-height: 500px;background-repeat:no-repeat;background-size:cover;} .market-day {background-image:url(../images/investor-centre/market-day.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .registration-strip {background-image:url(../images/investor-centre/registration-strip.jpg);min-height: 500px;background-repeat:no-repeat;background-size:cover;} .registration-strip div {display: block; width: 39%; box-sizing: border-box; padding-left: 64px; transform: translateY(15%); float: left;} .registration-strip h2 {font-weight: 300; color: #000; margin-bottom:20px;} .figures-strip div {display: block; width: 39%; box-sizing: border-box; padding-left: 64px; transform: translateY(15%); float: left;} .figures-strip h2 {font-weight: 300; color: #000;} .history-banner div {width: 39%; float:left;} .history-banner div h1 {color:#fff;} .investor-banner div {transform: translateY(45%);width: 50%; float:right;} .investor-banner div h1 {color:#fff;} .investor-banner div p {color:#fff;} .history-banner div p {color:#fff;} .strategy-banner div p {font-weight:bold;} .dedicated-banner div h1 {color:#fff;} .dedicated-banner div p {color:#fff;} .at-a-glance-banner div {transform: translateY(15%);width: 40%;} .market-day div {transform: translateY(100%);width: 40%;} .strategy-banner div {transform: translateY(30%);width:40%;} .sustainability-banner div {transform: translateY(30%);} .dedicated-banner div {transform: translateY(16%);} .foundation-banner div {display: block; width: 39%; box-sizing: border-box; padding-left: 64px; transform: translateY(45%);} .adr-banner div {width: 30%; transform: translateY(100%);} .adr-banner div h1 {color:#fff;} .adr-banner div p {color:#fff;} .notice-banner {background-image: url(../images/home-results-banner.png); min-height: 400px; background-repeat: no-repeat; background-size: cover;} .notice-banner div {width: 70%; transform: translateY(20%);} .notice-banner div h1 {color:#fff;} .notice-banner div p {color:#fff;} .performance-banner {background-image: url(../images/performance/performance-banner.jpg); min-height:500px; background-repeat: no-repeat; background-size: cover;} .performance-banner div {width: 40%; transform: translateY(32%);} .performance-banner div h1 {color:#fff;} .performance-banner div p {color:#fff;} .consensus-banner {background-image: url(../images/consensus-estimates/consensus-banner.jpg); min-height:500px; background-repeat: no-repeat; background-size: cover;} .consensus-banner div {width:35%; transform: translateY(10%);} .consensus-banner div h1 {color:#fff;} .consensus-banner div p {color:#fff;} .cv-banner {background-image:url(../images/leadership/cv-banner.png);min-height: 343px;background-repeat:no-repeat;background-size:cover;} .cv-banner div {display:block;width:100%;box-sizing:border-box;padding-left:64px;transform: translateY(50%); position:relative;} .cv-banner h1 {margin-bottom:48px; font-weight:100; color:#000;} .cv-banner img {position:absolute;top: -63px;right:0px;} .clearly-defined-banner {background-image:url(../images/investor-centre/clearly-defined-banner.jpg); min-height:400px; background-repeat:no-repeat; background-size:cover;} .clearly-banner div {display:block;width:50%;box-sizing:border-box;padding-left:64px;transform: translateY(50%);} .clearly-banner h2 {font-weight:100; color:#000;} .history-2-banner {background-image:url(../images/why-invest/future-growth-banner.png); min-height:365px; background-repeat:no-repeat; background-size:cover;} .economic-banner div {display: block; width: 39%; box-sizing: border-box; padding-left: 64px; transform: translateY(15%);} .economic-banner h2 {font-weight:100; color:#000;} .market-leader-banner {background-image:url(../images/strategy/market-leader-banner-new.jpg); min-height:370px; background-repeat:no-repeat; background-size:cover;} .market-leader-banner div {display:block;width: 45%;box-sizing:border-box;padding-left:64px;transform: translateY(50%);text-align:right;float:right;} .market-leader-banner div h2 {color:#000;font-weight: 400;} .pan-african-banner {background-image:url(../images/investor-centre/pan-african-banner.jpg);min-height:370px;background-repeat:no-repeat;background-size:cover;background-position: center;} .pan-african-banner div {display:block;width:50%;box-sizing:border-box;padding-left:64px;transform: translateY(25%);text-align:right;float:right;} .pan-african-banner div h2 {color:#000;font-weight: 300;} .foundation-banner2 {background-image: url(../images/foundation/foundation-banner-2.jpg); min-height: 360px; background-repeat: no-repeat; background-size:cover;} .foundation-banner2 div {display: block; width: 39%; box-sizing: border-box; padding-left: 64px; transform: translateY(20%);} .foundation-banner2 div h1 {color:#fff;} .foundation-banner2 div p {color:#fff; margin-top:16px;} .leadership-banner {background-image:url(../images/leadership/leadership-banner-new.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .leadership-banner div {width:32%;} .leadership-banner div h1 {color:#fff;} .leadership-banner div p {color:#fff;} .sustainability-banner div p {font-weight:700;} .dedicated-banner div p {font-weight:700;} .investor-banner div p {font-weight:700;} .financial-reporting-banner {background-image: url(../images/financial-reporting-banner.jpg); min-height: 600px; background-repeat: no-repeat; background-size:cover;} .financial-reporting-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(70%);} .financial-reporting-banner div h1 {color: #fff;} .presentations-banner {background-image: url(../images/presentations-banner-new.jpg); min-height:600px; background-repeat: no-repeat; background-size:cover;} .presentations-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(70%);} .presentations-banner div h1 {} .dividends-banner {background-image: url(../images/dividend-banner-new.jpg); min-height:500px; background-repeat: no-repeat; background-size:cover;} .dividends-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(40%);} .dividends-banner div h1 {color:#fff;font-weight: 400;} .dividends-banner div p {color:#fff;} .debt-banner {background-image: url(../images/debt-banner-new.jpg); min-height:630px; background-repeat: no-repeat; background-size:cover;} .debt-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(100%);} .debt-banner div h1 {color:#fff;font-weight: 400;} .debt-banner div p {color:#fff;} .media-banner {background-image: url(../images/media-banner.jpg); min-height:630px; background-repeat: no-repeat; background-size:cover;} .media-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(100%);} .media-banner div h1 {color:#fff;font-weight: 400;} .media-banner div p {color:#fff;} .faq-banner {background-image: url(../images/faq-banner.jpg); min-height: 460px; background-repeat: no-repeat; background-size:cover;} .faq-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(40%);float: right;} .faq-banner div h1 {color:#000;font-weight: 300;} .faq-banner div p {color:#000; font-weight: 500;} .governance-banner {background-image: url(../images/governance-banner.jpg); min-height: 500px; background-repeat: no-repeat; background-size:cover;} .governance-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;float: left;transform: translateY(40%);} .governance-banner div h1 {color: #fff;} .governance-banner div p {color: #fff;} .investor-contact-banner {background-image: url(../images/investor-contact-banner.jpg); min-height: 360px; background-repeat: no-repeat; background-size:cover;} .investor-contact-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(40%);} .investor-contact-banner div h1 {color:#fff;} .investor-contact-banner div p {color:#fff;} .shareholder-banner {background-image:url(../images/shareholder-banner-new.jpg); min-height:627px; background-repeat:no-repeat; background-size:cover;} .shareholder-banner div {transform: translateY(50%);float: left;} .shareholder-banner div h1 {} .shareholder-banner div p {} .sens-banner {background-image: url(../images/sens-banner.jpg);min-height: 539px;background-repeat: no-repeat;background-size:cover;} .sens-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(60%);} .sens-banner div h1 {} .sens-banner div p {color:#fff;} .legal-banner {background-image: url(../images/legal-banner.jpg); min-height: 360px; background-repeat: no-repeat; background-size:cover;} .legal-banner div {display: block;width: 45%;box-sizing: border-box;padding-left: 64px;transform: translateY(150%);} .legal-banner div h1 {color: #fff;} .legal-banner div p {color:#fff;} .shareholder-banner div p {font-weight:700;} .why-invest-inner-banner1 {background-image:url(../images/why-invest-banner-new.jpg); min-height:500px; background-repeat:no-repeat; background-size:cover;} .why-invest-inner-banner2 {background-image:url(../images/why-invest-banner2.jpg); min-height:365px; background-repeat:no-repeat; background-size:cover;} .why-invest-inner-banner3 {background-image: url(../images/why-invest-banner3-new.jpg); min-height: 500px; background-repeat: no-repeat; background-size: cover; background-position: 0px -200px;} .why-invest-inner-banner3 div {display: block;width: 44%;box-sizing: border-box;padding-left: 0;transform: translateY(25%);text-align: left;float: left;} .why-invest-inner-banner1 div {display: block;width: 43%;box-sizing: border-box;padding-left: 0;transform: translateY(25%);text-align: left;float: left;} .why-invest-inner-banner2 div {display: block;width: 45%;} .why-invest-inner-banner3 div h2 {color: #fff;font-weight: 300;} .why-invest-inner-banner2 div h2 {color: #000;font-weight: 300;} .embedding-sustainability-banner {background-image:url(../images/investor-centre/clearly-defined-banner.jpg);min-height:500px;background-repeat:no-repeat;background-size:cover; background-position: 0px -50px;} .embedding-sustainability-banner div {display:block;width: 60%;box-sizing:border-box;padding-left:64px;transform: translateY(25%);text-align:right;float:left;} .embedding-sustainability-banner div h2 {color:#fff;font-weight: 300;} .embedding-sustainability-banner div a {margin-top: 32px;} .map-height {min-height:700px;} .body-h1 {font-size:20px;} .body-h2 {font-size:16px;} .body-h3 {font-size:14px;letter-spacing: 2px;} .body-h4 {font-size:12px;} .highlights {display:block; position:relative; padding-bottom:16px; margin-bottom:16px; font-weight:bold; color:#000; font-size:19px; line-height:1.3;} .highlights:after {content:''; position:absolute; bottom:0px; left:0px; width:43px; height:2px; background:#4098D7;} .highlights-white {display:block; position:relative; padding-bottom:16px; margin-bottom:16px; font-weight:bold; color:#000;} .highlights-white:after {content:''; position:absolute; bottom:0px; left:0px; width:43px; height:2px; background:#fff;} .blue-bg-highlights {background: #3189CF; border-radius:4px; box-sizing: border-box; padding: 15px; text-align: center; margin-bottom: 34px; min-height: 190px;} .blue-bg-highlights img {margin-bottom: 16px;max-width: 50px;} .blue-bg-highlights p {color:#fff;} .grey-bg-highlights {background: #F5F7FA; border-radius:8px; box-sizing: border-box; padding: 15px; text-align: center; margin-bottom: 34px; min-height: 240px;} .grey-bg-highlights:hover {background:#2A75C9;} .grey-bg-highlights:hover p {color:#fff;} .grey-bg-highlights4 {background: #2A75C9; color:#fff; border-radius:8px; box-sizing: border-box; padding: 15px; text-align: center; margin-bottom: 34px; min-height: 50px;} .grey-bg-highlights4:hover {background:#F5F7FA; color:#000;} .grey-bg-highlights4:hover p {color:#fff;} .strategy-box-outer img {display: block;line-height: 1;vertical-align: bottom;border-radius: 4px 4px 0 0;} .strategy-box {background:#F5F7FA;box-sizing: border-box;padding: 20px 20px 150px 20px;position: relative;padding-bottom: 45px;min-height: 300px;border-radius:0px 0px 4px 4px;} .strategy-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px;} .capital-box-outer img {display: block;line-height: 1;vertical-align: bottom;border-radius: 4px 4px 0 0;} .capital-box {background: #F5F7FA; box-sizing: border-box; padding: 20px 20px 150px 20px; position: relative; padding-bottom: 45px; min-height: auto; border-radius: 0px 0px 4px 4px;} .capital-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px;} ul.guide-list {list-style:none; margin:0; padding:0; margin-top:60px;} ul.guide-list li {float:left; width:25%; text-align:center; min-height:300px;} ul.guide-list li:nth-child(3) {border-right:1px solid #0087CE; box-sizing:border-box} ul.guide-list li div p {display:block; width:70%; color:#0087CE; font-size:22px; margin:0 auto; padding-top:20px;} ul.empower-list {list-style:none; margin:0; padding:0; margin-top:60px;} ul.empower-list li {float:left; width:25%; text-align:center;} ul.empower-list li div p {display:block; width:70%; color:#0087CE; font-size:22px; margin:0 auto; padding-top:20px;} .history-box-outer img {display: block; line-height: 1; vertical-align: bottom;} .history-box {background:#F5F7FA;box-sizing: border-box;padding: 20px;position: relative;padding-bottom: 45px;min-height: 330px;border-radius: 0px 0px 4px 4px;} .history-box-outer2 img {display: block; line-height: 1; vertical-align: bottom;} .history-box2 {background: #F5F7FA;box-sizing: border-box;padding: 20px;position: relative;padding-bottom: 45px;min-height: 430px;border-radius: 0px 0px 4px 4px;} .investing-box {background:#F5F7FA;box-sizing: border-box;padding: 20px;position: relative;padding-bottom: 45px;border-radius: 0px 0px 4px 4px;} .investing-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px; font-weight:bold;} .documents-box {background:#fff;box-sizing: border-box;padding: 32px;position: relative;min-height:160px;border-radius: 4px;} .documents-box + a{ margin-left:32px;} .documents-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px; font-weight:bold;} .documents-box p{ position: relative} .faqs-box {background:#F5F7FA; box-sizing: border-box; padding: 20px; position: relative; padding-bottom: 45px; min-height:500px; border-radius: 4px;} .faqs-box p {margin-bottom:15px;} .faqs-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px; font-weight:bold;} .faqs-box a.general-button{ color: #fff;} .regulatory-box {background:#F5F7FA; box-sizing: border-box; padding: 20px; position: relative; padding-bottom: 45px;} .regulatory-box p {color:#2A75C9; font-size:12px; font-weight:bold; float:right; margin-bottom:15px;} .regulatory-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px; font-weight:bold;} .shares-box {background:#fff;box-sizing: border-box;padding: 32px;position: relative;min-height:550px;border-radius: 4px;} .shares-box + a{ margin-left:32px;} .shares-box a {font-size:14px; color:#2E8ED3; position: absolute; bottom: 15px; font-weight:bold;} .shares-box p{ position: relative} .press-box {background: #f5f7f9;box-sizing: border-box;padding: 24px;position: relative;padding-bottom: 45px;min-height: 400px;border-radius: 0px 0px 4px 4px;} .press-box p:first-of-type {color:#2A75C9;font-size:12px;font-weight:bold;float:right;margin-bottom: 8px;padding-bottom: 0px;} .press-box p:last-of-type {color:#000;} .press-box a {font-size:14px;color:#2E8ED3;position: absolute;bottom: 24px;font-weight:bold;} .media-release-box {background: #f5f7f9;box-sizing: border-box;padding: 24px;position: relative;padding-bottom: 45px;min-height: 370px;border-radius: 0px 0px 4px 4px;} .media-release-box p:first-of-type {color:#2A75C9;font-size:12px;font-weight:bold;float: left;margin-bottom: 8px;padding-bottom: 0px;} .media-release-box p:last-of-type {color:#000;} .media-release-box a {font-size:14px;color:#2E8ED3;position: absolute;bottom: 24px;font-weight:bold;} .contents-box {background:#fff;box-sizing: border-box;padding: 32px;position: relative;min-height:150px;border-radius: 4px;} .value-creation {display:block; width:49%; margin:0 auto;} .purpose-content {width:60%; margin:0 auto;} .purpose-content p {text-align:center;} .vision-list-container {width: 100%;overflow: hidden;min-height: 75px;position: relative;} .vision-list { position: absolute; width: 500%; transform: translateX(0); transition: .35s linear all;} .bullet-vision-list {margin: 0;padding: 0;list-style: none;text-align: center;} .bullet-vision-list li {display: inline-block;border-radius: 50%;border: 1px solid #ccc;width: 10px;height: 10px;background: #fff;margin-right: 15px;transition: .35s linear all;padding: 5px;box-sizing: border-box;cursor: pointer;} .bullet-vision-list li.active {background: #2E8ED3; transition: .35s linear all;} .vision-list-block {width: 20%; float: left;} .vision-list-block p {text-align: center;color:#6D6E70;font-size: 22px;padding: 0 250px;box-sizing: border-box;} .vision-list2 {position: absolute; width: 500%; transform: translateX(0); transition: .35s linear all;} .vision-list-container2 {width: 100%;overflow: hidden;min-height:170px;position: relative;} .bullet-vision-list2 {margin: 0;padding: 0;list-style: none;text-align: center;} .bullet-vision-list2 li {display: inline-block;border-radius: 50%;border: 1px solid #ccc;width: 10px;height: 10px;background: #fff;margin-right: 15px;transition: .35s linear all;padding: 5px;box-sizing: border-box;cursor: pointer;} .bullet-vision-list2 li.active {background: #2E8ED3; transition: .35s linear all;} .vision-list-block2 {width: 20%; float: left;} .vision-list-block2 h2 {text-align: center;color:#000;font-size: 40px;padding: 0 250px;box-sizing: border-box; padding-bottom:16px;} .vision-list-block2 p {text-align: center;color:#000;font-size: 24px;padding: 0 250px;box-sizing: border-box;} .vision-list3 {position: absolute; width: 500%; transform: translateX(0); transition: .35s linear all;} .vision-list-container3 {width: 100%;overflow: hidden;min-height:170px;position: relative;} .bullet-vision-list3 {margin: 0;padding: 0;list-style: none;text-align: center;} .bullet-vision-list3 li {display: inline-block;border-radius: 50%;border: 1px solid #ccc;width: 10px;height: 10px;background: #fff;margin-right: 15px;transition: .35s linear all;padding: 5px;box-sizing: border-box;cursor: pointer;} .bullet-vision-list3 li.active {background: #2E8ED3; transition: .35s linear all;} .vision-list-block3 {width: 20%; float: left;} .vision-list-block3 h2 {text-align: center;color:#000;font-size: 40px;padding: 0 250px;box-sizing: border-box; padding-bottom:16px;} .vision-list-block3 p {text-align: center;color:#000;font-size: 24px;padding: 0 250px;box-sizing: border-box;} .vision-list4 {position: absolute; width: 700%; transform: translateX(0); transition: .35s linear all;} .vision-list-container4 {width: 100%;overflow: hidden;min-height:70px;position: relative;} .bullet-vision-list4 {margin: 0;padding: 0;list-style: none;text-align: center;} .bullet-vision-list4 li {display: inline-block;border-radius: 50%;border: 1px solid #ccc;width: 10px;height: 10px;background: #fff;margin-right: 15px;transition: .35s linear all;padding: 5px;box-sizing: border-box;cursor: pointer;} .bullet-vision-list4 li.active {background: #2E8ED3; transition: .35s linear all;} .vision-list-block4 {width: 14.28%; float: left;} .vision-list-block4 h4 {text-align: center;color:#000;font-size: 40px;padding: 0 250px;box-sizing: border-box; padding-bottom:16px;} .vision-list-block4 p {text-align: center;color:#000;font-size: 40px;padding: 0 250px;box-sizing: border-box;} .vision-list-container22 {width: 100%;overflow: hidden;min-height:230px;position: relative;} .vision-list22 {position: absolute;width: 500%;transform: translateX(0);transition: .35s linear all;} .bullet-vision-list22 {margin: 0;padding: 0;list-style: none;text-align: center;display: none;} .bullet-vision-list22 li {display: inline-block;border-radius: 50%;border: 1px solid #ccc;width: 10px;height: 10px;background: #fff;margin-right: 15px;transition: .35s linear all;padding: 5px;box-sizing: border-box;cursor: pointer;} .bullet-vision-list22 li.active {background: #2E8ED3; transition: .35s linear all;} .vision-list-block22 {width: 20%;float: left;} .vision-list-block22 h2 {text-align: center;color:#000;font-size: 40px;padding: 0 0px;box-sizing: border-box; padding-bottom:16px;} .vision-list-block22 p {text-align: center;color:#000;font-size: 16px;padding: 0 0px;box-sizing: border-box; font-weight:bold} ul.presentation-list {list-style:none; margin:0; padding:0;} ul.presentation-list li {border-bottom:1px solid #2E8ED3; margin-bottom:15px;} ul.presentation-list li p:nth-child(1) {font-size:14px; color:#000; margin-bottom:15px;} ul.presentation-list li p:nth-child(1) span {font-size:20px; padding-right:15px;} ul.presentation-list li p:nth-child(1) b {font-weight:bold;} ul.presentation-list li p:nth-child(2) {font-size:12px; color:#2A75C9; font-weight:bold; margin-bottom:15px;} ul.ir-list {list-style:none; margin:0; padding:0;} ul.ir-list li {border-bottom:1px solid #2E8ED3; margin-bottom:15px;} ul.ir-list li p:nth-child(1) {font-size:13px;color:#000;/* margin-bottom:15px; */} ul.ir-list li p:nth-child(1) span {font-size:18px; padding-right:15px;} ul.ir-list li p:nth-child(1) b {font-weight:bold;} ul.ir-list li p:nth-child(2) {font-size:12px;color:#2A75C9;font-weight:bold;margin-bottom: 7px;} ul.sens-list {list-style:none; margin:0; padding:0;} ul.sens-list li {border-bottom:1px solid #2E8ED3; margin-bottom:15px;} ul.sens-list li p:nth-child(1) {font-size:14px; color:#2A75C9; font-weight:bold;} ul.sens-list li p:nth-child(2) {font-size:14px; color:#000; font-weight:bold; margin-bottom:15px;} ul.policies-list {list-style:none; margin:0; padding:0;} ul.policies-list li {border-bottom:1px solid #2E8ED3; margin-bottom:15px;} ul.policies-list li p:nth-child(1) {font-size:14px; color:#000; font-weight:bold;} ul.policies-list li p:nth-child(2) {font-size:12px; color:#2A75C9; margin-bottom:15px; font-weight:bold;} ul.telephone-list {list-style:none; margin:0; padding:0; margin-bottom:15px;} ul.telephone-list li {position:relative; margin-left:50px; color:#000;} ul.telephone-list li:before {content:url('../images/investor-centre/phone.png'); position:absolute; top:0px; left:-50px;} ul.envelope-list {list-style:none; margin:0; padding:0;} ul.envelope-list li {position:relative; margin-left:50px; color:#2A75C9; font-weight:bold;} ul.envelope-list li:before {content:url('../images/investor-centre/envelope.png'); position:absolute; top:0px; left:-50px;} ul.dotted-list {list-style:none; margin:0 0 18px 25px; padding:0px;} ul.dotted-list li {position:relative; padding-left:15px; padding-bottom:5px;} ul.dotted-list li:before {content:''; position:absolute; top:10px; left:0; display:block; width:4px; height:4px; background:#000; border-radius:50%;} ul.advantage-list2 {list-style:none; margin:0; padding:0;} ul.advantage-list2 li {float:left; width: 290px; margin-right:30px;} ul.advantage-list2 li:last-of-type {margin-right:0px;} ul.footer-list {list-style:none; margin:0; padding:0;} ul.footer-list li {font-size:16px; margin-bottom:20px!important;} ul.footer-list li a {color:#000; font-weight:normal;} ul.footer-list li a:hover {color:#2E8ED3;} ul.shareholder-list {list-style:none; margin:0; padding:0;} ul.shareholder-list li {border-bottom:1px solid #2E8ED3; margin-bottom:15px;} ul.shareholder-list li p:nth-child(1) {font-size:14px;color:#000;margin-bottom:16px;} ul.shareholder-list li p:nth-child(2) {font-size:12px;color:#2A75C9;font-weight:bold;margin-bottom:0px;} ul.three-list {list-style:none; margin:0; padding:0;} ul.three-list li {float:left; min-height:700px; padding:32px 16px; box-sizing:border-box;} ul.three-list li div {min-height:70px; font-size:18px; text-align:center; padding:32px;} ul.three-list li:nth-child(1) {width:25%; border-bottom:10px solid #0C77BD; position:relative;} ul.three-list li:nth-child(1):after {content:''; width:30px; height:30px; border-radius:50%; display:block; position:absolute; right:0px; bottom:-20px; background:#0C77BD;} ul.three-list li:nth-child(2) {width:25%; border-bottom:10px solid #F2A900; position:relative;} ul.three-list li:nth-child(2):after {content:''; width:30px; height:30px; border-radius:50%; display:block; position:absolute; right:0px; bottom:-20px; background:#F2A900;} ul.three-list li:nth-child(3) {width:50%; text-align:center; border-bottom:10px solid #73C3B7; position:relative;} ul.three-list li:nth-child(3):after {content:''; width:30px; height:30px; border-radius:50%; display:block; position:absolute; right:0px; bottom:-20px; background:#73C3B7;} .circle {position:relative; top:50px; width:65%; padding-bottom:65%; background:#006CAF; border-radius:50%; margin:0 auto; /*transform: translate(0px, 100px);*/ display:block;} .circle h3{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); margin:0; text-align:center; color:#fff; font-weight:bold;} ul.logo-list {list-style:none; margin:0; padding:0; margin-top:32px;} ul.logo-list li {float:left; width:15%; margin-right:2%; text-align:center;} ul.logo-list li:last-of-type {margin-right:0%;} .box22 {background-color: #F5F7FA; height: 307px; width: 307px; transition: all 0.1s ease-in-out; margin-top: 1em; border-radius:4px;} .box22 p {text-align:center; vertical-align:middle; color:#000; font-size:24px; padding-top:120px;} .box22:hover {background-color: #2A75C9; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .box22:hover p {display:none;} .box22 > div {display: none; transition: all 0.1s ease-in-out; padding:30px; box-sizing:border-box; color:#fff;} .box22 > div ul {list-style:none; margin:0; padding:0;} .box22 > div ul li {position:relative; width:auto; color:#fff;} .box22 > div ul li:before {content:''; position:absolute; top:8px; left:-15px; border:1px solid #fff; border-radius:50%; width:5px; height:5px; display:block;} .box22:hover > div {display: block; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .grey-bg-case {background: #F5F7FA; border-radius:8px; box-sizing: border-box; padding: 15px; text-align: center; margin-bottom: 34px; min-height: 240px; transition: all 0.1s ease-in-out;} .grey-bg-case div {color:#2A75C9;} .grey-bg-case p {display:none;} .grey-bg-case:hover {background:#2A75C9; transition: all 0.1s ease-in-out;} .grey-bg-case:hover p {display:block; color:#fff;} .grey-bg-case:hover div {display:none;} .grey-bg-case2 {background: #2A75C9; border-radius:8px; box-sizing: border-box; padding: 15px; text-align: center; margin-bottom: 34px; min-height: 240px; transition: all 0.1s ease-in-out;} .grey-bg-case2 div {color:#2A75C9; line-height:210px;} .grey-bg-case2 p {display:none;} .grey-bg-case2:hover {background:#F5F7FA; transition: all 0.1s ease-in-out;} .grey-bg-case2:hover p {display:block; color:#2A75C9;} .grey-bg-case2:hover div {display:none;} .box33 {background-color: #F5F7FA; height: 307px; width: 307px; transition: all 0.1s ease-in-out; margin-top: 1em; border-radius:4px;} .box33 p {text-align:center; vertical-align:middle; color:#000; font-size:24px; padding-top:90px;} .box33:hover {background-color: #2A75C9; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .box33:hover p {display:none;} .box33 > div {display: none; transition: all 0.1s ease-in-out; padding:30px; box-sizing:border-box; color:#fff; position:relative;} .box33 > div span {color:#fff; vertical-align:middle; font-size:16px;} .box33 > div button {color:#2A75C9; background:#fff; padding:10px 20px; font-size:16px; border:0px; position:absolute; bottom:30px; left:30px; font-weight:bold; border-radius:3px;} .box33 > div ul {list-style:none; margin:0; padding:0;} .box33 > div ul li {position:relative; width:auto; color:#fff;} .box33 > div ul li:before {content:''; position:absolute; top:9px; left:-15px; border:1px solid #fff; border-radius:50%; width:7px; height:7px; display:block;} .box33:hover > div {display: block; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .box33 p img{ max-width: 50px;} .share-list {list-style:none; margin:0; padding:0;} .share-list li {float:left; box-sizing:border-box;} .share-list li:nth-child(1) {width:77%; padding-right:128px;} .share-list li:nth-child(2) {width:23%;} .share-box {background:#0150A3; border-radius:10px; color:#fff; box-sizing:border-box; padding:20px; margin-bottom:32px; min-height:300px;} .key-docsbox {background:#ACD2ED; border-radius:10px; color:#000; box-sizing:border-box; padding:20px; position:relative; min-height:300px;} .key-docsbox p {padding-bottom:16px;} .key-docsbox a {position:absolute; bottom:20px; left:20px; font-size:14px; font-weight:bold; color:#2A75C9;} .policy-link a {color:#0074C9!important;} .radius {border-radius:4px;} .radius-8 {border-radius:8px;} .radius-top-bottom {border-radius:4px 4px 0px 0px;} .radius-bottom-left {border-radius:0px 0px 4px 4px;} .invest-blueblock {background:#0074C9; padding:15px; box-sizing:border-box; border-radius:5px; padding:20px; margin-bottom:20px; min-height:440px; position:relative;} .invest-blueblock p {font-size:20px;} .invest-blueblock ul {list-style:none; margin:0px; padding:0px;} .invest-blueblock ul li {font-size: 16px;line-height: 1.5; color: #fff; position:relative; padding-left:20px; margin-bottom:10px;} .invest-blueblock ul li:before {content:''; position:absolute; top:10px; left:0px; background:#fff; width:5px; height:5px; border-radius:50%;} .agenda-line {border-bottom:1px solid #ccc; background:#fff; padding:15px; margin-bottom:20px;} b, strong { font-weight: 600; line-height: 1; } sup, sub { vertical-align: super; position: relative; top: -3px; font-size: 8px; } sub { top: 12px; } body { font-family: 'Roboto'; font-weight: 400; font-style: normal; color: #000; font-size: 100%; margin: 0; width: 100%; } p { font-size: 16px; line-height: 1.5; font-family: 'Roboto'; font-weight: 400; font-style: normal; color: #000; margin: 0px; padding-bottom: 16px; } p.caption {font-size:12px;} /*--------------5* LAYOUT STYLES------------*/ header{} .top-global-nav{} .top-nav-left-list{ margin: 0; padding: 0; background: #E0E4E9; width: calc(88% + 5px); display: inline-block; } .top-nav-left-list li{ font-size: 12px; display: inline-block; padding: 10px 20px; color: #939BA4; box-sizing: border-box; } .top-nav-right-list{ width: calc(12% - 5px); margin: 0; padding: 0; background: #E0E4E9; display: inline-block; margin-left: -5px; } .top-nav-right-list li{ font-size: 12px; display: inline-block; padding: 10px 20px; color: #939BA4; box-sizing: border-box; } .top-nav-left-list li:last-of-type { background: #fff; color: #2A75C9; } .top-nav-left-list li:last-of-type a:hover{color: #2A75C9;} .region-block { background: #fff; max-width: 1300px; box-shadow: 1px 1px 40px #000; position: absolute; top: 48px; right: 45px; height: auto; box-sizing: border-box; padding: 32px; border-radius: 4px; z-index: 99; display:none; } .region{ cursor: pointer; color:#2E8ED3!important} .region-block:after{ width: 0; height: 0;border: 9px solid transparent; border-bottom: 9px solid #fff; right: 30px; top: -18px; content: ''; position: absolute;} .region-block div { border-right: 1px solid #000; padding: 0 15px; min-height: 395px; } .region-block div:last-of-type{ border: none;} .region-block div h4{ font-size: 18px;} .region-block div a { font-size: 14px; display: block; line-height: 30px; } .region-block div a:hover{color:#2E8ED3} .region-block article{ padding: 0;} .region-block div h2 a{font-size: 18px; color:#000;} .main-nav{} .mobile-menu-trigger{ display: none;} .logo{ display: inline-block; padding: 20px 50px 20px 20px; box-sizing: border-box; } .main-nav-list{ margin: 0; padding: 0px 0 0 0; display: inline-block; vertical-align: super;width: 85%;} .main-nav-list li{ display: inline-block; padding: 20px 20px; box-sizing: border-box; color: #717983; font-size: 18px; cursor: pointer; } .main-nav-list li a{color: #717983;font-size: 18px;} .mobile-sub-menu{ display: none; padding: 0; margin: 0;} .mobile-sub-menu li{ font-size: 13px; padding: 10px 20px;} .mobile-sub-menu li a{ font-size: 13px!important;} .nav-container{ background: #2E8ED3; padding: 0; box-sizing: border-box; min-height: auto; transition: .35s linear all; } .mobile-menu { display: none!important; } .nav-content{ display: none;} .nav-content article{ max-width: 1440px; width: 100%; margin: 0 auto; } .mega-menu-left-col{ width: 70%; float: left; box-sizing: border-box; padding-right: 100px; padding-left: 50px; margin-top: 34px; } .mega-menu-left-col h1{ color: #fff; font-weight: 100; margin-top: 30px; margin-bottom: 16px; } .mega-menu-left-col p{ color: #fff; margin-bottom: 16px; } .mega-menu-left-col a.go-to{ color: #fff; font-size: 12px; padding-left: 20px; position: relative; } .mega-menu-left-col .sub-menu{ margin: 0; padding: 0; margin-top: 50px; margin-bottom: 50px; } .mega-menu-left-col .sub-menu li{ color: #fff; height: 65px; line-height: 65px; border-bottom: 1px solid #fff; background: rgba(255, 255, 255, 0.0); transition: .35s linear all; padding-left: 15px; box-sizing: border-box; cursor: pointer; } .mega-menu-left-col .sub-menu li:first-of-type { border-top: 1px solid #fff; } .mega-menu-left-col .sub-menu li a{color:#fff; font-weight:normal;} .mega-menu-left-col .sub-menu li:hover{ background: rgba(255, 255, 255, 0.14); transition: .35s linear all;} .mega-menu-right-col{ float: left; width: 30%; margin-top: 140px; margin-bottom: 60px; } .mega-menu-right-col .img-container{ background: #fff; border-radius: 4px 4px 4px 4px; } .mega-menu-right-col .img-container img{ max-width: 100%; border-radius: 4px 4px 0 0; } .mega-menu-right-col .img-container .content-container{ box-sizing: border-box; padding: 32px; } .mega-menu-right-col .img-container .content-container h3{ color: #000; padding-bottom: 16px; font-size: 20px; line-height: 1.5; } .mega-menu-right-col .img-container .content-container p{ color: #000; margin: 0; padding: 0; font-size: 14px; } .mega-menu-right-col .img-container .content-container a.read-more{ color: #0075C9; padding-top: 16px; display: inline-block; font-size: 14px; } article {max-width:1400px; width:100%; box-sizing:border-box; padding:0 32px; margin:0 auto;} /*--------------6* MISC RESETS------------*/ .center-block, .obj-c { display: block; margin: 0 auto; text-align: center; max-width: 100%; } .img-responsive{ max-width: 100%} .clearfix:after, .clearfix:before { display: table; content: " " } .clearfix:after { clear: both } /*--------------7* PAGE STYLES------------ add all your pages styles here*/ .background-grey {background:#F5F7FA;} .background-white {background:#FFFFFF;} .background-blue {background:#2E8ED3;} .col-2 {float:left; width:calc(50% - 16px); margin-right:32px; box-sizing: border-box;} .col-2:last-of-type {margin-right:0px;} .col-2Right {float:left; width:calc(50% - 64px); margin-right:128px; box-sizing: border-box;} .col-2Right:last-of-type {margin-right:0px;} .col-3 {float:left; width:calc(33.33% - 22px); margin-right:32px; box-sizing: border-box;} .col-3:last-of-type {margin-right:0px;} .col-4 {float:left; width:calc(25% - 24px); margin-right:32px; box-sizing: border-box;} .col-4:last-of-type {margin-right:0px;} .col-5 {float:left; width:calc(20% - 25.6px); margin-right:32px; min-height:110px;} .col-5:last-of-type {margin-right:0px;} .col-6 {float:left; width:16.66%; margin-right:32px; box-sizing: border-box;} .col-6:last-of-type {margin-right:0px;} .col-66 {float:left; width:14%; margin-right:32px; box-sizing: border-box;} .col-66:last-of-type {margin-right:0px;} .general-button {background:#0074C9; color:#fff; font-size:16px; padding:10px 20px; display:inline-block; border-radius: 4px;} .general-button.right {margin-right:32px;} .col-70 {float:left; width:calc(70% - 16px); margin-right:32px; box-sizing: border-box;} .col-30 {float:left; width:calc(30% - 16px); margin-right:32px; box-sizing: border-box;} .col-60 {float:left; width:calc(60% - 16px); margin-right:32px; box-sizing: border-box;} .col-40 {float:left; width:calc(40% - 16px); margin-right:32px; box-sizing: border-box;} .figures-row {display:flex; gap:5%;} .figures-row .column {flex-basis:14%;} ul.advantage-list {list-style:none; margin:0; padding:0;} ul.advantage-list li {float:left; width:307px; margin-right:30px;} ul.advantage-list li:last-of-type {margin-right:0px;} .box2 {background-color: #fff; height: 307px; width: 307px; transition: all 0.1s ease-in-out; margin-top: 1em; border-radius:4px;} .box2 p {text-align:center; vertical-align:middle; color:#000; font-size:24px; padding-top:120px;} .box2:hover {background-color: #2A75C9; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .box2:hover p {display:none;} .box2 > div {display: none; transition: all 0.1s ease-in-out; padding:30px; box-sizing:border-box; color:#fff;} .box2 > div ul {list-style:none; margin:0; padding:0;} .box2 > div ul li {position:relative; width:auto; color:#fff;} .box2 > div ul li:before {content:''; position:absolute; top:9px; left:-15px; border:1px solid #fff; border-radius:50%; width:7px; height:7px; display:block;} .box2:hover > div {display: block; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .blenderTabs ul {list-style: none;padding: 0;margin: 0;} .blenderTabs ul li {margin: 0; display: block;overflow: hidden;cursor: pointer; position:relative; margin-bottom:40px;} /*.blenderTabs li:after {content:url('../images/why-invest/arrow-down.png');font-size: 40px; line-height: 0; float: right; padding-right: 10px; position:absolute; top:0px; right:0px;} .blenderTabs li.active:after {padding-right: 16px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);}*/ .tabContent {} .active.tabContent {display: block !important;} .leading--zero {list-style-type: decimal-leading-zero;} ol.leading--zero {list-style-type: none; padding: 0; margin: 0;} ol.leading--zero li { display: block; width: 100%; cursor: pointer;overflow: hidden; position:relative} ol.leading--zero li:after {content:'>'; position:absolute; top:14px; right:0px; width:35px; height:35px; display:block; transform: rotate(90deg); color:#2E8ED3;} ol.leading--zero li h3 {font-size:24px; color:#000; position:relative;} ol.leading--zero li.active {color: #000; font-weight:bold;} ol.leading--zero li:before {font-size: 22px;} /* Custom Layout */ .content--inline {display: inline;} .span_6 {width: 45%; float:left; margin-top:32px;} .span_5 {width: 45%; float:right; margin-top:32px;} .investor-overview-banner {position: relative; background-image:url(../images/why-invest/why-invest-banner.png); min-height:627px; background-repeat:no-repeat;} .slider {min-height: 955px;position: relative;} .two-col-slider-invest{position: relative;z-index: 9;top:-100px;left: 32px;max-width: calc(100% - 64px);} .slider-content-col{float: left;width: calc(70% - 32px);margin-right: 64px;} .slider-content-col div{position: relative;background: #fff;box-sizing: border-box;padding: 32px;min-height: 400px;} .slider-content-col div a{position: absolute;bottom: 20px;left: 32px;font-size: 14px;font-weight: bold;color: #2A75C9;} .slider-img-col{float: left;width: calc(30% - 32px);} .slider-img-col img{max-width: 100%;} .slider-bullets{position: absolute;bottom: -30px;right: 135px;} .slider-bullets ul{margin: 0;padding: 0;list-style: none;display: inline-block;} .slider-bullets ul li{background: #D5DAE1;width: 10px;height: 10px;border-radius: 50%;display: inline-block;margin-right: 10px;cursor: pointer;} .slider-bullets ul li.active{background: #0150A3;} .slide{transition:all linear .55s;min-height: 315px;position: relative;} .sustainability-intro-banner{transition:all linear .35s;background-image: url("../images/sustainability-slide-bg-1-new.jpg");position: relative;min-height: 1054px;box-sizing: border-box;padding: 128px 0;} .sustainability-slider-bullets{position: absolute;left: -10px;top: 56%;} .sustainability-slider-bullets ul{margin: 0;padding: 0;list-style: none;display: inline-block;} .sustainability-slider-bullets ul li{background: #D5DAE1;width: 13px;height: 13px;border-radius: 50%;display: block;margin-bottom: 13px;cursor: pointer;} .sustainability-slider-bullets ul li.active{background: #0150A3;} .slider-block {background: #fff;padding: 32px;max-width: 760px;box-sizing: border-box;min-height: 435px;} .sustainability-intro-banner h2 {color: #fff;max-width: 760px;} .sustainability-intro-banner article {POSITION: RELATIVE;} .slide a {position: absolute;bottom: 16px;left: 0;font-size: 14px;font-weight: bold;color: #2A75C9;} ul.blue-list {list-style:none; margin:0; padding:0;} ul.blue-list li {padding-left:30px; position:relative; margin-bottom:16px;} ul.blue-list li:before {content:''; position:absolute; top:6px; left:0px; display:block; border:3px solid #94C7E7; border-radius:50%; width:7px; height:7px;} .download-button {background: #0074C9; color: #fff; font-size: 16px; padding: 10px 10px 10px 40px; display: inline-block; border-radius: 4px; position:relative; margin-top:24px; width:50%;} .download-button:before {content:url('../images/icons/download-btn-icon.png'); position:absolute; top:11px; left:10px; width:18px; height:18px;} .website-button {background: #0074C9; color: #fff; font-size: 16px; padding: 10px 10px 10px 40px; display: inline-block; border-radius: 4px; position:relative; margin-top:24px; width:50%;} .website-button:before {content:url('../images/icons/new-window-icon.png'); position:absolute; top:11px; left:10px; width:18px; height:18px;} .website-button-home {background: #0074C9; color: #fff; font-size: 16px; padding: 10px 10px 10px 40px; display: inline-block; border-radius: 4px; position:relative; margin-top:24px; width:20%;} .website-button-home:before {content:url('../images/icons/new-window-icon.png'); position:absolute; top:11px; left:10px; width:18px; height:18px;} .stakeholder-button {background: #0074C9; color: #fff; font-size: 16px; padding: 10px; display: inline-block; border-radius: 4px; position:relative; margin-top:24px; width:70%; text-align:center;} ul.bee-list {list-style:none; margin:0; padding:0;} ul.bee-list li {float:left; width:49%; margin-right:2%;} ul.bee-list li:nth-child(2), ul.bee-list li:nth-child(4) {margin-right:0%;} .bee-box {background-color: #F5F7FA; height:210px; width: 307px; transition: all 0.1s ease-in-out; margin-top: 1em; border-radius: 4px; padding:24px; box-sizing:border-box; color:#000;} .bee-box:hover {background-color:#2E8ED3; color:#fff;} .bee-box img {margin-bottom:24px; display:block;} .bee-box img.bee-display {display:none;} .bee-box p {font-size: 20px;margin-bottom:16px;padding-bottom:0px;} .bee-box a {font-size:16px} .bee-box:hover.bee-box img {display:none;} .bee-box:hover.bee-box img.bee-display {display:block;} .bee-box:hover.bee-box p {color:#fff;} .bee-box:hover.bee-box a {color:#fff;} .transformation-banner {background-image: url("../images/transformation/transformation-banner.jpg"); min-height:690px; background-repeat: no-repeat; background-size: cover; background-position: center;} .transformation-banner div {transform: translateY(15%); float: left; width:50%;} .transformation-banner div h1 {color:#fff;} .transformation-banner div p {color:#fff;} /*--------------* ACCORDION------------*/ .accordion {font-size: 16px; width: 100%; margin: 0 auto; border-radius: 5px;} .accordion-header, .accordion-body {background: white;} .accordion-header {padding:8px;color: #000;cursor: pointer;font-size:16px;margin-bottom: 16px;transition: all .3s;border-bottom:1px solid #BCC4CE;} .accordion__item {border-bottom: 0px solid #3a4ba4;} .accordion__item .accordion__item {border-bottom: 1px solid rgba(0, 0, 0, 0.08);} .accordion-header:hover {background: #EBEEF1; position: relative; z-index: 5;} .accordion-body {display: none;margin-bottom: 16px;} .accordion-body__contents {padding: 32px 32px; font-size: .85em;} .accordion__item.active:last-child .accordion-header {border-radius: none;} .accordion:first-child > .accordion__item > .accordion-header {border-bottom: 1px solid transparent;} .accordion__item > .accordion-header:after {content: ""; font-size:12px; float: right; position: relative; top:10px; transition: .3s all; transform: rotate(45deg); border: solid #0075C9; border-width: 0 2px 2px 0; display: inline-block; padding: 3px;} .accordion__item.active > .accordion-header:after {content: "-";} .accordion__item.active .accordion-header {background: #0163B8;} .accordion__item .accordion__item .accordion-header {} @media screen and (max-width: 1000px) { .accordion {width: 100%;} } /*--------------7.1* HOME PAGE------------*/ .home-key-docsbox p a { COLOR: #000; } .home-video-banner article { min-height: 955px; position: relative; } div#videoContentContainer h1 { color: #fff; font-weight: 300; } div#videoContentContainer { position: absolute; z-index: 9; top: 20%; transform: translateY(-20%); width: 100%; } .home-video-banner{position: relative;min-height: 955px;margin-bottom: 300px;} #videoContainer {position: absolute;opacity: 1;display:block;margin:0;padding:0px;left: 0;top: 0;border:0;box-sizing: border-box;width:100%;z-index: 8;height: 955px;overflow: hidden;-ms-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;background:#000;} .videoBG {position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;width: 100%;height: 955px;box-sizing: border-box;max-width:1700px;margin:0 auto;} .videoBG > video {position: absolute;top: 0;left:0;width: 100%;height: auto;margin:0 auto;padding:0;box-sizing: border-box;-ms-transition:all .5s ease;-webkit-transition:all .5s ease;transition:all .5s ease;} .sound-options {position: absolute;z-index: 9;left: 20px;top: 10%;min-height: 80px;min-width: 80px;} .sound-options button {width: 50px;height: 50px;border-radius: 50%;border: 0;background: #0070C5;position: absolute;transition: .35s linear all;transition: .55s linear all; left: 0;} .sound-options button img {text-align: center;max-width: 80%;line-height: 50px;display: block;margin: 0 auto;} .sound-options:hover button:nth-of-type(1) {transition: .35s linear all; z-index: 8;} .sound-options:hover button:nth-of-type(2) {left: 0px; transition: .55s linear all;z-index: 9;} .sound-options:hover button:nth-of-type(3) {left: 65px;transition: .55s linear all;} .sound-options button:nth-of-type(1) {transition: .35s linear all; z-index: 9;} .sound-options button:nth-of-type(2) { transition: .55s linear all;} .sound-options button:nth-of-type(3) {transition: .55s linear all;} .slider-invest-img-col { float: left; width: 100%; } .slider-invest-img-col img { max-width: 100%; border-radius: 4px; } .slider-invest-bullets { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);} .one-col-slider { position: relative; z-index: 9; top: 0px; left: 0; max-width: calc(100% - ); } .slider-invest-bullets ul { margin: 0; padding: 0; list-style: none; display: inline-block; } .slider-invest-bullets ul li.active { background: #0150A3; } .slider-invest-bullets ul li { background: #D5DAE1; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 10px; cursor: pointer; } .search { width: 50px; height: 40px; margin: 6px auto 0; background-color: #fff; position: relative; overflow: hidden; transition: all 0.5s ease; float: right;} .search:before { content: ""; display: block; width: 3px; height: 100%; position: relative; background-color: #2E8ED3; transition: all 0.5s ease; } .search.open { width: 420px; } .search.open:before { height: 40px; margin: 0px 0 0px 0px; position: absolute; } .search form { margin: 0; width: 100%; height: 100%; } .search-box { width: 100%; height: 100%; box-shadow: none; border: none; background: #E0E4E9; color: #2E8ED3; padding: 0px 0px 0px 10px; font-size: 16px; } .search-box:focus { outline: none; } .search-button { width: 50px; height: 40px; display: block; position: absolute; right: 0; top: 0; /* padding: 20px; */ cursor: pointer; } .search-icon { width: 15px; height: 15px; border-radius: 40px; border: 2px solid #2E8ED3; display: block; position: relative; margin-left: 14px; margin-top: 7px;transition: all 0.5s ease; } .search-icon:before { content: ""; width: 2px; height: 15px; position: absolute; right: -4px; top: 11px; display: block; background-color: #2E8ED3; transform: rotate(-45deg); transition: all 0.5s ease; } .search-icon:after { content: ""; width: 2px; height: 15px; position: absolute; right: -5px; top: 11px; display: block; background-color: #2E8ED3; transform: rotate(-45deg); transition: all 0.5s ease; } .open .search-icon { margin: 6px 0 0 0; width: 25px; height: 25px; border-radius: 60px; } .open .search-icon:before { transform: rotate(52deg); right: 11px; top: 11px; height: 10px; } .open .search-icon:after { transform: rotate(-230deg); right: 11px; top: 5px; height: 10px; } .share-list {list-style:none; margin:0; padding:0;} .share-list li {float:left; box-sizing:border-box;} .share-list li:nth-child(1) {width:77%; padding-right:128px;} .share-list li:nth-child(2) {width:23%;} .home-share-box {background:#0150A3;border-radius: 4px;color:#fff;box-sizing:border-box;padding:20px;margin-bottom:32px;min-height:300px;position: relative;} .home-share-box a.read-more {position:absolute;bottom:20px;left:20px;font-size:14px;font-weight: normal;color:#fff;} .home-sens-box {background: #F5F7FA;border-radius: 4px;color: #000;box-sizing:border-box;padding:20px;margin-bottom:32px;min-height:300px;position: relative;} .home-sens-box a.read-more {position:absolute;bottom: 13px;left:20px;font-size:14px;font-weight: normal;color: #000;} .home-key-docsbox {background: #ACD2ED;border-radius: 4px;color:#000;box-sizing:border-box;padding:20px;position:relative;min-height:300px;position: relative;} .home-key-docsbox p {padding-bottom:16px;} .home-key-docsbox a.read-more {position:absolute;bottom:20px;left:20px;font-size:14px;font-weight: normal;color: #000;} .home-key-docsbox h4{color: #000;} .anual-results-banner {background-image:url("../images/home-results-banner.png");min-height:365px;background-repeat:no-repeat;position: relative;} .anual-results-banner:after{background: rgba(0, 0, 0, 0.15);position: absolute;top: 0;left: 0;z-index: 7;width: 100%;height: 100%;content: '';} .anual-results-banner div {position: relative;z-index: 8;display: block;width:50%;box-sizing: border-box;padding-left: 0px;transform: translateY(10%);float: right;/* text-align: right; */} .anual-results-banner div p {margin-bottom:0px;} .gauge-banner {background-image:url("../images/home-gauge-banner.jpg");min-height:657px;background-repeat:no-repeat;position: relative;} .gauge-results-banner:after{background: rgba(0, 0, 0, 0.15);position: absolute;top: 0;left: 0;z-index: 7;width: 100%;height: 100%;content: '';} .gauge-results-banner div {position: relative;z-index: 8;display: block;width:50%;box-sizing: border-box;padding-left: 0px;transform: translateY(25%);float: right;/* text-align: right; */} .gauge-results-banner div h2 {font-size:40; font-weight:bold; margin-bottom:16px;} .gauge-results-banner div p {margin-bottom:0px;} .ubuntu-banner {background-image:url("../images/ubuntu.jpg");min-height:657px;background-repeat:no-repeat;position: relative;} .ubuntu-banner:after{background: rgba(0, 0, 0, 0.15);position: absolute;top: 0;left: 0;z-index: 7;width: 100%;height: 100%;content: '';} .ubuntu-banner div {position: relative;z-index: 8;display: block;width:40%;box-sizing: border-box;padding-left: 0px;transform: translateY(25%);float: left;/* text-align: right; */} .ubuntu-banner div h2 {font-size:40; font-weight:bold; margin-bottom:16px;} .ubuntu-banner div p {margin-bottom:0px;} .two-col-slider{ position: absolute; z-index: 9; bottom: -200px; left: 32px; max-width: calc(100% - 64px); } .slider-content-col { float: left; width: calc(70% - 32px); margin-right: 64px; background: #fff; } .slider-content-col div{position: relative;background: #fff;box-sizing: border-box;padding: 32px;min-height: 400px;border-radius: 4px;} .slider-content-col div a{ position: absolute; bottom: 20px; left: 32px; font-size: 14px; font-weight: bold; color: #2A75C9; } .slider-img-col{float: left;width: calc(30% - 32px);} .slider-img-col img{max-width: 100%;border-radius: 4px;} .slider-bullets{ position: absolute; bottom: -30px; right: 135px; } .slider-bullets ul{ margin: 0; padding: 0; list-style: none; display: inline-block; } .slider-bullets ul li{ background: #D5DAE1; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 10px; cursor: pointer; } .slider-bullets ul li.active{ background: #0150A3; } .slide{transition:all linear .55s;min-height: 315px;position: relative;} .sustainability-intro-banner{transition:all linear .35s;background-image: url("../images/sustainability-slide-bg-1-new.png");position: relative;min-height: 1054px;box-sizing: border-box;padding: 128px 0;} .sustainability-slider-bullets{position: absolute;left: -10px;top: 56%;} .sustainability-slider-bullets ul{margin: 0; padding: 0; list-style: none; display: inline-block;} .sustainability-slider-bullets ul li{ background: #D5DAE1; width: 13px; height: 13px; border-radius: 50%; display: block; margin-bottom: 13px; cursor: pointer; } .sustainability-slider-bullets ul li.active{ background: #0150A3; } .slider-block { background: #fff; padding: 32px; max-width: 760px; box-sizing: border-box; min-height: 435px; border-radius:4px; } .sustainability-intro-banner h2 { color: #fff; max-width: 760px; } .sustainability-intro-banner article { POSITION: RELATIVE; } .slide a { position: absolute; bottom: 16px; left: 0; font-size: 14px; font-weight: bold; color: #2A75C9; } .calendar-bg-highlights {background: #F5F7FA;border-radius: 8px;box-sizing: border-box;padding: 16px;text-align: left;margin-bottom: 34px;min-height: 180px;position: relative;} .calendar-bg-highlights .date{font-size: 20px;font-weight: 300;margin-bottom: 0px;} .calendar-bg-highlights .art{ font-size: 14px;} .calendar-bg-highlights a {position: absolute;bottom: 16px;left: 16px;font-size: 12px;font-weight: normal;color: #2A75C9;} .calendar-bg-highlights-last {background: #054CA0;border-radius: 8px;box-sizing: border-box;padding: 16px;text-align: left;margin-bottom: 34px;min-height: 180px;position: relative;} .calendar-bg-highlights-last h4 {font-size:20px; color:#000; margin-bottom:10px; color:#fff;} .calendar-bg-highlights-last ul {list-style:none; margin:0; padding:0;} .calendar-bg-highlights-last ul li {font-size:14px; margin-bottom:10px; color:#fff;} .calendar-bg-highlights-last ul li a {color:#fff;} .why-invest-blocks {background: #fff;border-radius: 4px;box-sizing: border-box;padding: 32px;text-align: left;margin-bottom: 34px;min-height: 480px;position: relative;} .home-invest-blocks {border-radius: 4px;box-sizing: border-box;padding: 32px;text-align: left;margin-bottom: 34px;min-height:470px;position: relative;} .home-invest-blocks:nth-of-type(1) {background: #76c2b6;} .home-invest-blocks:nth-of-type(2) {background: #9db7b4;} .home-invest-blocks:nth-of-type(3) {background: #5493bd;} .home-invest-blocks:nth-of-type(4) {background: #825474;} .share-price{font-size: 60px;line-height: 1;padding: 0;margin: 0;margin-top: 34px;} .share-date{font-weight: 300;padding: 0;margin: 0;margin-top: 16px;} #loader1{ position: absolute; z-index: 8; top: 50%; left: 50%; transform: translate(-50%, -50%)} .loader1{ position: absolute; z-index: 8; top: 50%; left: 50%; transform: translate(-50%, -50%)} #endofdaygraph{ position: relative; z-index: 9; height: 450px; background: #fff;} #sendsfeed{ position: relative; z-index: 9; height: 850px; background: #fff;} #sens-home{ position: relative; z-index: 9; height: 200px;} #sharepriceCalcfeed{ position: relative; z-index: 9; background: #fff;} #interactiveshare{ position: relative; z-index: 9; background: #fff;} iframe{width:100%} #sharesens{ position: relative; z-index: 9; height: 175px;} .results-banner {background-image:url("../images/home-results-banner-1.png");min-height: 645px;background-repeat:no-repeat;position: relative;} .results-banner:after{background: rgba(0, 0, 0, 0.30);position: absolute;top: 0;left: 0;z-index: 7;width: 100%;height: 100%;content: '';} .results-banner div {position: relative;z-index: 8;display: block;width:80%;box-sizing: border-box;padding-left: 0px;transform: translateY(15%);} .table_lines{} .table_lines tr{} .table_lines tr td{border-bottom: 1px solid #ccc;padding: 10px;} .table_lines tr td:first-of-type{background: #2E8ED3;color: #fff;} ul.strategy-list {list-style:none; padding:0; margin: 0 auto; margin-top:64px;width: 60%;} ul.strategy-list li {float:left;width: 25%; cursor: pointer;} .block-one-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-two-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-three-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px;margin:0 auto;box-sizing:border-box;transition:0.35s linear all;} .block-four-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-five-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-six-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-seven-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-eight-border {display:block;width:122px;height:122px;border:1px solid #fff;border-radius:50%;padding:10px; margin:0 auto; box-sizing:border-box; transition:0.35s linear all;} .block-one {display:block; width:100px; height:100px; border-radius:50%; background:#fff; margin:0 auto; position:relative;} .block-two {width:100px; height:100px; display:block; border-radius:50%; background:#fff; margin:0 auto; position:relative;} .block-three {width:100px; height:100px; display:block; border-radius:50%; background:#fff; margin:0 auto; position:relative;} .block-four {width:100px; height:100px; display:block; border-radius:50%; background:#fff; margin:0 auto; position:relative;} .block-five {width:100px; height:100px; display:block; border-radius:50%; background:#5493BD; margin:0 auto; position:relative;} .block-six {width:100px; height:100px; display:block; border-radius:50%; background:#825474; margin:0 auto; position:relative;} .block-seven {width:100px; height:100px; display:block; border-radius:50%; background:#54B8EA; margin:0 auto; position:relative;} .block-eight {width:100px; height:100px; display:block; border-radius:50%; background:#0075C9; margin:0 auto; position:relative;} .block-one img {position: absolute; top: 8px; left: 9px;} .block-two img {position: absolute; top: 8px; left: 9px;} .block-three img {position: absolute; top: 8px; left: 9px;} .block-four img {position: absolute; top: 8px; left: 9px;} .block-five img {position: absolute; top: 8px; left: 9px;} .block-six img {position: absolute; top: 8px; left: 9px;} .block-seven img {position: absolute; top: 8px; left: 9px;} .block-eight img {position: absolute; top: 8px; left: 9px;} .block-one-border:hover, li.active .block-one-border {border:1px solid #0087CE; transition:0.35s linear all;} .block-two-border:hover, li.active .block-two-border {border:1px solid #0087CE; transition:0.35s linear all;} .block-three-border:hover, li.active .block-three-border {border:1px solid #0087CE; transition:0.35s linear all;} .block-four-border:hover, li.active .block-four-border {border:1px solid #0087CE; transition:0.35s linear all;} .block-five-border:hover, li.active .block-five-border {border:1px solid #5493BD; transition:0.35s linear all;} .block-six-border:hover, li.active .block-six-border {border:1px solid #825474; transition:0.35s linear all;} .block-seven-border:hover, li.active .block-seven-border {border:1px solid #54B8EA; transition:0.35s linear all;} .block-eight-border:hover, li.active .block-eight-border {border:1px solid #0075C9; transition:0.35s linear all;} ul.blue-square-list {list-style:none; padding:0; margin:0; margin-top:64px;} ul.blue-square-list li {float:left; width:22%; min-height:170px; margin-right:4%; background:#2E8ED3; border-radius:4px; color:#fff; box-sizing:border-box; padding:24px;} ul.blue-square-list li:last-of-type {margin-right:0%;} ul.blue-square-list li p {vertical-align:middle; text-align:center; color:#fff; font-size:20px;} ul.blue-square-list-5 {list-style:none; padding:0; margin:0; margin-top:64px;} ul.blue-square-list-5 li {float:left; width:18.4%; min-height:170px; margin-right:2%; background:#2E8ED3; border-radius:4px; color:#fff; box-sizing:border-box; padding:24px;} ul.blue-square-list-5 li:last-of-type {margin-right:0%;} ul.blue-square-list-5 li p {vertical-align:middle; text-align:center; color:#fff; font-size:20px;} .blue-border-box {border-bottom:2px solid #2E8ED3; display:block; position:relative;} .blue-border-box:after {content: ''; display: block; position: absolute; top: 16px; left: 50%; width: 20px; height: 20px; border-left: 2px solid #2E8ED3; border-bottom: 2px solid #2E8ED3; background: #fff; transform: rotate(-45deg);} .execute-box {width:90%; margin:0 auto; margin-top:64px;} ul.execute-list {list-style:none; margin:0; padding:0;} ul.execute-list li {float:left; width:16.66%;} ul.society-list {list-style:none; margin:0; padding:0;} ul.society-list li {float:left; width:16.66%;} .execute-circle1 {width:100px; height:100px; border:3px solid #76C2B6; border-radius:50%; display:block; margin:0 auto; position:relative;} .execute-circle2 {width:100px; height:100px; border:3px solid #9DB7B4; border-radius:50%; display:block; margin:0 auto; position:relative;} .execute-circle3 {width:100px; height:100px; border:3px solid #825474; border-radius:50%; display:block; margin:0 auto; position:relative;} .execute-circle4 {width:100px; height:100px; border:3px solid #F2A900; border-radius:50%; display:block; margin:0 auto; position:relative;} .execute-circle5 {width:100px; height:100px; border:3px solid #5493BD; border-radius:50%; display:block; margin:0 auto; position:relative;} .execute-circle6 {width:100px; height:100px; border:3px solid #000; border-radius:50%; display:block; margin:0 auto; position:relative;} .execute-circle1 span {color:#76C2B6; display:block; width:80px; height:80px; position:absolute; top:25px; left:10%; text-align:center; font-weight:bold;} .execute-circle2 span {color:#9DB7B4; display:block; width:80px; height:80px; position:absolute; top:25px; left:10%; text-align:center; font-weight:bold;} .execute-circle3 span {color:#825474; display:block; width:80px; height:80px; position:absolute; top:25px; left:10%; text-align:center; font-weight:bold;} .execute-circle4 span {color:#F2A900; display:block; width:80px; height:80px; position:absolute; top:25px; left:10%; text-align:center; font-weight:bold;} .execute-circle5 span {color:#5493BD; display:block; width:80px; height:80px; position:absolute; top:25px; left:10%; text-align:center; font-weight:bold;} .execute-circle6 span {color:#000; display:block; width:80px; height:80px; position:absolute; top:25px; left:10%; text-align:center; font-weight:bold;} .switch-execute {color:#2E8ED3; font-weight:bold;} .strategy-cont{ padding: 32px 0;} .strategy-cont div{} .strategy-cont div p{ font-size: 32px; text-align: center;} .strategy-cont div#hov-1 p{ color:#0087CE} .strategy-cont div#hov-2 p{ color:#0087CE} .strategy-cont div#hov-3 p{ color:#0087CE} .strategy-cont div#hov-4 p{ color:#0087CE} .strategy-cont div#hov-5 p{ color:#5493BD} .strategy-cont div#hov-6 p{ color:#825474} .strategy-cont div#hov-7 p{ color:#54B8EA} .strategy-cont div#hov-8 p{ color:#0075C9} ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px; width: 100%; padding-left:18px;} ul.tabs li {float: left;margin: 0;cursor: pointer; overflow: hidden;position: relative;background:#fff;margin-right:16px;padding:10px 20px!important;font-weight:bold;display: inline-block;width: auto!important;} ul.tabs li:after {content:''; display:block; width:32px; height:2px; background:#0075C9; position:absolute; top:50px; left:20px;} .tab_last {} ul.tabs li.active {background-color: #0075C9;color:#fff;} .tab_container {border-top: none;clear: both;float: left;width: 100%;overflow: auto;} .tab_content {padding:0px;display: none;} .tab_drawer_heading { display: none;} .container {max-width: 1400px;margin: 0 auto;width: 100%;display: block;align-items: center;justify-content: center;} .box-title {width: 100%;position: absolute;text-align: center;top: 32%;} .box-callout {width: calc(33% - 32px);float: left;margin: 15px 16px;padding: 0;min-height: 180px;} .box-callout figure {position: relative;overflow: hidden;padding: 0; margin: 0; min-height: 180px;} .box-callout figure img.img-responsive {width: 100%;} .box-callout h3 {margin: 0 auto;font-size: 1.4em !important;color: #fff !important;text-align: center !important;margin: 10px !important; line-height:1.4;} .box-callout p {font-size: 1em !important;color: #444 !important;text-align: center !important;} .box-callout figcaption p {color: #fff !important; font-size:12px!important;} .box-callout figcaption ul {list-style: none;margin: 0;padding: 0;} .box-callout figcaption ul {visibility: visible;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;} .box-callout figcaption ul li {display: inline-block;padding: 10px;} .box-callout h4 {margin: 10px 0 0;padding: 0;} .box-callout figcaption {padding: 10%;color: transparent;background-color: transparent;position: absolute;z-index: 996;bottom: 0;left: 0;width: 80%;height: 0;margin: 0 0 !important;display: flex;flex-direction: column;font-size: 16px;font-weight: 300; letter-spacing: 1px;line-height: 1.6em;align-items: center;justify-content: center;overflow: hidden;visibility: hidden;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} .box-callout figure:hover figcaption {visibility: visible;color: #fff;background: rgba(0, 116, 201, 0.9);/* Primary color, can be changed via colors.css */height: 85%;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} .box-callout figure:hover figcaption ul li a:hover {color: rgba(49, 49, 49, .97);} .box-callout figure img.img-responsive {-webkit-transform: scale(1.1) rotate(0) translateY(0);-moz-transform: scale(1.1) rotate(0) translateY(0);-o-transform: scale(1.1) rotate(0) translateY(0);-ms-transform: scale(1.1) rotate(0) translateY(0);transform: scale(1.1) rotate(0) translateY(0);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;} .box-callout figure:hover img.img-responsive {-webkit-transform: scale(1.3) rotate(0) translateY(12px);-moz-transform: scale(1.3) rotate(0) translateY(12px);-o-transform: scale(1.3) rotate(0) translateY(12px);-ms-transform: scale(1.3) rotate(0) translateY(12px); transform: scale(1.3) rotate(0) translateY(12px);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;} img.square-one {display: block; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);} .tab {overflow: hidden;} .tab button {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 15px 5px;transition: 0.3s;font-size: 18px; color:#7889A3; width:20%; height:80px;} .tab button:hover {border-bottom: 4px solid #7889A3; background:#; color:#7889A3;} .tab button.active {border-bottom: 4px solid #7889A3; background:#2E8ED3; color:#fff;} .tabcontent {display: none;padding: 15px;border: 1px solid #717171;} .podcasts-row {display:flex; gap:2%;} .podcasts-row div {flex-basis: 50%;} .podcasts-image {background-image: url('../images/podcasts.jpg'); background-size: cover;background-position: center;display: flex;justify-content: center;align-items: center;height: 315px;} .creation-table {display:table; width:100%;} .creation-table-cell {display:table-cell; vertical-align:top;} .creation-table-cell:first-of-type {width:25%;} .creation-table-cell:last-of-type {width:75%;} .creation-table-cell:first-of-type div {display:block; background:#3189CF; color:#fff; width:200px; height:200px; text-align:center; padding:24px 24px 24px 24px; box-sizing:border-box; border-radius:4px;} .creation-table-cell:first-of-type div p {color:#fff; margin-top:16px;} ul.journey-list {list-style:none;padding:0;margin:32px 0px;} ul.journey-list li {width: 100%;float: none;border:1px solid #2A75C9;border-radius:8px;box-sizing:border-box;padding:24px;min-height:321px;} ul.journey-list li:first-of-type {margin-right: 0;margin-bottom: 32px;} .journey-list-block {width:50%;border:1px solid #2A75C9;border-radius:8px;box-sizing:border-box;padding:24px;margin: 32px auto 32px auto;float: left;} .journey {width: calc(50% - 45px); float: left; margin-right: 45px;} .col-6-journey {float: left; width:18%; margin-right:2%; text-align:center; background:#0D6FB2; border-radius:8px; color:#fff; padding:16px; box-sizing:border-box; margin-top:32px;} .col-6-journey:last-of-type {margin-right:0%;} .background-white ul.tabs li{ background: #F5F7FA;} .background-white ul.tabs li{ color: #000;} .background-white ul.tabs li.active{ color: #000;} ul.ratings-list {list-style:none; margin:0; padding:0;} ul.ratings-list li {float:left; width:307px; margin-right:30px;} ul.ratings-list li:last-of-type {margin-right:0px;} .box-ratings {background-color: #fff;height: 307px;width: 307px;transition: all 0.1s ease-in-out;margin-top: 1em;border-radius:4px;box-sizing: border-box;padding: 34px;line-height: 250px;position: relative;} .box-ratings p {text-align:center;vertical-align:middle;color:#000;font-size:24px;/* padding-top:120px; */line-height: 1.5;display: inline-block;width: 100%;} .box-ratings:hover {background-color: #2A75C9; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .box-ratings:hover p {display:none;} .box-ratings > div {display: none;transition: all 0.1s ease-in-out;padding:30px;box-sizing:border-box;color:#fff;position: absolute;left: 0;top: 0;} .box-ratings > div ul {list-style:none; margin:0; padding:0;} .box-ratings > div ul li {position:relative; width:auto; color:#fff;} .box-ratings > div ul li:before {content:'';position:absolute;top: 6px;left:-15px;border:1px solid #fff;border-radius:50%;width:7px;height:7px;display:block;} .box-ratings:hover > div {display: block; height: 307px; width: 307px; transition: all 0.1s ease-in-out;} .box-ratings:hover > div span {display:block; line-height:0px; margin-bottom:16px;} .box-ratings div span img { display: block; max-width: 100%; margin: 0 auto;} .box-blue {background:#F5F7FA; color:#fff; padding: 32px; border-radius: 0px 0px 35px 0px;} .filter-cat { margin: 1em 0; } .f-cat {} .f-cats {color: #fff;padding: 0;border: 0;} .filter-cat-results .f-cat { opacity: 0; display: none; } .filter-cat-results .f-cats { opacity: 0; display: none; } .filter-cat-results .f-cat.active { opacity: 1; display: block; -webkit-animation: fadeIn 0.65s ease forwards; animation: fadeIn 0.65s ease forwards; } .filter-cat-results .f-cats.active { opacity: 1; display: block; -webkit-animation: fadeIn 0.65s ease forwards; animation: fadeIn 0.65s ease forwards; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .table-html { display: inline-block; margin-right: 20px; color: #0075C9; width: 10%; text-align: center; } .table-booklet { display: inline-block; margin-right: 20px; color: #0075C9; width: 10%; text-align: center; } .table-date { display: inline-block; margin-right: 20px; color: #0075C9; width: 5%; } .table-name { display: inline-block; margin-right: 20px; color: #0075C9; width: 67%; } .row-date { width: 5%; color: #0075C9; display: inline-block; margin-right: 20px; } .row-name { width: 67%; color: #000; display: inline-block; margin-right: 20px; } .row-html { width: 10%; color: #064181; display: inline-block; margin-right: 20px; text-align: center; } .row-booklet { width: 10%; color: #064181; display: inline-block; margin-right: 20px; text-align: center; } .row-heading { width: 100%; color: #0075C9; display: block; margin-right: 0px; text-align: left; font-size: 15px; padding-left: 90px; font-weight: 400; margin-top: 16px; } .table-header { border-bottom: 2px solid #064181; margin-bottom: 16px; padding-bottom: 10px; font-size: 17px; color: #064181; font-weight: 400; } .table-row { margin-bottom: 15px; box-shadow: 1px 1px 1px #ccc; padding: 10px 0; font-size: 14px; box-sizing: border-box; } .table-row i { font-size: 20px; text-align: center; width: 100%; display: block; color: #064181; position: relative; height: 25px; } .table-row .row-html a i:after{content: url("../images/icons/desktop-screen.png");position: absolute;top: 0;left: 50%;} .table-row .row-booklet a i:after{content: url("../images/icons/download.png");position: absolute;top: 0;left: 50%; } select { width: 100%; margin: 0 0 10px 0; display: block; padding: 12px; background: #e2e4e5; -webkit-transition: background-color 0.2s linear; -moz-transition: background-color 0.2s linear; -ms-transition: background-color 0.2s linear; transition: background-color 0.2s linear; border-radius: 2px; -webkit-box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0, 0.15); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); color: #848484; border: none; } select::-ms-expand { display: none; } .custom-select { width: calc(50% - 80px); border-radius: 0.25em; position: relative; padding: 16px; font-size: 15px; cursor: pointer; line-height: 1.1; background-color: #fff; margin: 45px 45px 15px 0px; float: left; } .custom-select label { position: relative; top: -32px; } /*--------------8* SWITCH COLOURS------------*/ .switch-white {color:#fff!important;} .switch-green-1 {color:#006A82!important;} .switch-green-2 {color:#006A82!important;} .switch-green-3 {color:#006A82!important;} .switch-orange-1 {color:#278EA3!important;} .switch-orange-2 {color:#278EA3!important;} .switch-orange-3 {color:#278EA3!important;} .switch-red-1 {color:#278EA3!important;} .switch-red-2 {color:#278EA3!important;} .switch-red-3 {color:#278EA3!important;} .switch-aqua-1 {color:#278EA3!important;} .switch-aqua-2 {color:#278EA3!important;} .switch-aqua-3 {color:#278EA3!important;} .switch-duskblue-1 {color:#014089!important;} .switch-duskblue-2 {color:#014089!important;} .switch-duskblue-3 {color:#014089!important;} .switch-fynbos-1 {color:#CEE9E7!important;} .switch-fynbos-2 {color:#9DB7B4!important;} .switch-fynbos-3 {color:#6E8784!important;} .switch-orchid-1 {color:#B281A3!important;} .switch-orchid-2 {color:#825374!important;} .switch-orchid-3 {color:#532947!important;} .switch-blue-1 {color:#E6F1FA!important;} .switch-blue-2 {color:#ACD2ED!important;} .switch-blue-3 {color:#53A2DB!important;} .switch-blue-4 {color:#2E8ED3!important;} .switch-blue-5 {color:#0074C9!important;} .switch-blue-6 {color:#0163B8!important;} .switch-blue-7 {color:#0150A3!important;} .switch-grey-1 {color:#F5F7F9!important;} .switch-grey-2 {color:#F2F4F7!important;} .switch-grey-3 {color:#EBEEF1!important;} .switch-grey-4 {color:#DFE3E9!important;} .switch-grey-5 {color:#D6DAE0!important;} .switch-grey-6 {color:#BCC3CD!important;} .switch-grey-7 {color:#A1A8B2!important;} .switch-grey-8 {color:#8A929B!important;} .switch-grey-9 {color:#717983!important;} .switch-grey-10 {color:#48505A!important;} .switch-grey-11 {color:#222A34!important;} .switch-white {color:#fff!important;} .switch-black {color:#000!important;} /*--------9* FONT-WEIGHT RESETS----------*/ .B100 {font-weight: 100!important;} .B200 {font-weight: 200!important;} .B300 {font-weight: 300!important;} .B400 {font-weight: 400!important;} .B500 {font-weight: 500!important;} .B600 {font-weight: 600!important;} .B700 {font-weight: 700!important;} .B800 {font-weight: 800!important;} .B900 {font-weight: 900!important;} /*-----------10* PADDING RESETS------------*/ .no-padding {padding: 0 !important;} .no-paddingT {padding-top: 0 !important;} .no-paddingB {padding-bottom: 0 !important;} .no-paddingL {padding-left: 0 !important;} .no-paddingR {padding-right: 0 !important;} .padding-60 {padding: 60px !important;} .padding-60L {padding-left: 60px !important;} .padding-60R {padding-right: 60px !important;} .padding-60T {padding-top: 60px !important;} .padding-60B {padding-bottom: 60px !important;} .padding-50 {padding: 50px !important;} .padding-50L {padding-left: 50px !important;} .padding-50R {padding-right: 50px !important;} .padding-50T {padding-top: 50px !important;} .padding-50B {padding-bottom: 50px !important;} .padding-40 {padding: 40px !important;} .padding-40L {padding-left: 40px !important;} .padding-40R {padding-right: 40px !important;} .padding-40T {padding-top: 40px !important;} .padding-40B {padding-bottom: 40px !important;} .padding-30 {padding: 30px !important;} .padding-30L {padding-left: 30px !important;} .padding-30R {padding-right: 30px !important;} .padding-30T {padding-top: 30px !important;} .padding-30B {padding-bottom: 30px !important;} .padding-25 {padding: 25px !important;} .padding-25L {padding-left: 25px !important;} .padding-25R {padding-right: 25px !important;} .padding-25T {padding-top: 25px !important;} .padding-25B {padding-bottom: 25px !important;} .padding-20 {padding: 20px !important;} .padding-20L {padding-left: 20px !important;} .padding-20R {padding-right: 20px !important;} .padding-20T {padding-top: 20px !important;} .padding-20B {padding-bottom: 20px !important;} .padding-15 {padding: 15px !important;} .padding-15L {padding-left: 15px !important;} .padding-15R {padding-right: 15px !important;} .padding-15T {padding-top: 15px !important;} .padding-15B {padding-bottom: 15px !important;} .padding-10 {padding: 10px !important;} .padding-10L {padding-left: 10px !important;} .padding-10R {padding-right: 10px !important;} .padding-10T {padding-top: 10px !important;} .padding-10B {padding-bottom: 10px !important;} .padding-5 {padding: 5px !important;} .padding-5L {padding-left: 5px !important;} .padding-5R {padding-right: 5px !important;} .padding-5T {padding-top: 5px !important;} .padding-5B {padding-bottom: 5px !important;} .padding-4 {padding: 4px !important;} .padding-8 {padding: 8px !important;} .padding-16 {padding: 16px !important;} .padding-24 {padding: 24px !important;} .padding-32 {padding: 32px !important;} .padding-48 {padding: 48px !important;} .padding-64 {padding: 64px !important;} .padding-128 {padding: 128px !important;} .padding-256 {padding: 256px !important;} .padding-4B {padding-bottom: 4px !important;} .padding-8B {padding-bottom: 8px !important;} .padding-16B {padding-bottom: 16px !important;} .padding-24B {padding-bottom: 24px !important;} .padding-32B {padding-bottom: 32px !important;} .padding-48B {padding-bottom: 48px !important;} .padding-64B {padding-bottom: 64px !important;} .padding-128B {padding-bottom: 128px !important;} .padding-256B {padding-bottom: 256px !important;} .padding-4T {padding-top: 4px !important;} .padding-8T {padding-top: 8px !important;} .padding-16T {padding-top: 16px !important;} .padding-24T {padding-top: 24px !important;} .padding-32T {padding-top: 32px !important;} .padding-48T {padding-top: 48px !important;} .padding-64T {padding-top: 64px !important;} .padding-128T {padding-top: 128px !important;} .padding-256T {padding-top: 256px !important;} .padding-4R {padding-right: 4px !important;} .padding-8R {padding-right: 8px !important;} .padding-16R {padding-right: 16px !important;} .padding-24R {padding-right: 24px !important;} .padding-32R {padding-right: 32px !important;} .padding-48R {padding-right: 48px !important;} .padding-64R {padding-right: 64px !important;} .padding-128R {padding-right: 128px !important;} .padding-256R {padding-right: 256px !important;} .padding-4L {padding-left: 4px !important;} .padding-8L {padding-left: 8px !important;} .padding-16L {padding-left: 16px !important;} .padding-24L {padding-left: 24px !important;} .padding-32L {padding-left: 32px !important;} .padding-48L {padding-left: 48px !important;} .padding-64L {padding-left: 64px !important;} .padding-128L {padding-left: 128px !important;} .padding-256L {padding-left: 256px !important;} /*------------11* MARGIN RESETS-------------*/ .no-margin {margin: 0 !important;} .no-marginT {margin-top: 0 !important;} .no-marginB {margin-bottom: 0 !important;} .no-marginL {margin-left: 0 !important;} .no-marginR {margin-right: 0 !important;} .margin-60 {margin: 60px !important;} .margin-60L {margin-left: 60px !important;} .margin-60R {margin-right: 60px !important;} .margin-60T {margin-top: 60px !important;} .margin-60B {margin-bottom: 60px !important;} .margin-50 {margin: 50px !important;} .margin-50L {margin-left: 50px !important;} .margin-50R {margin-right: 50px !important;} .margin-50T {margin-top: 50px !important;} .margin-50B {margin-bottom: 50px !important;} .margin-40 {margin: 40px !important;} .margin-40L {margin-left: 40px !important;} .margin-40R {margin-right: 40px !important;} .margin-40T {margin-top: 40px !important;} .margin-40B {margin-bottom: 40px !important;} .margin-30 {margin: 30px !important;} .margin-30L {margin-left: 30px !important;} .margin-30R {margin-right: 30px !important;} .margin-30T {margin-top: 30px !important;} .margin-30B {margin-bottom: 30px !important;} .margin-25 {margin: 25px !important;} .margin-25L {margin-left: 25px !important;} .margin-25R {margin-right: 25px !important;} .margin-25T {margin-top: 25px !important;} .margin-25B {margin-bottom: 25px !important;} .margin-20 {margin: 20px !important;} .margin-20L {margin-left: 20px !important;} .margin-20R {margin-right: 20px !important;} .margin-20T {margin-top: 20px !important;} .margin-20B {margin-bottom: 20px !important;} .margin-15 {margin: 15px !important;} .margin-15L {margin-left: 15px !important;} .margin-15R {margin-right: 15px !important;} .margin-15T {margin-top: 15px !important;} .margin-15B {margin-bottom: 15px !important;} .margin-10 {margin: 10px !important;} .margin-10L {margin-left: 10px !important;} .margin-10R {margin-right: 10px !important;} .margin-10T {margin-top: 10px !important;} .margin-10B {margin-bottom: 10px !important;} .margin-5 {margin: 5px !important;} .margin-5L {margin-left: 5px !important;} .margin-5R {margin-right: 5px !important;} .margin-5T {margin-top: 5px !important;} .margin-5B {margin-bottom: 5px !important;} .margin-4 {margin: 4px !important;} .margin-8 {margin: 8px !important;} .margin-16 {margin: 16px !important;} .margin-24 {margin: 24px !important;} .margin-32 {margin: 32px !important;} .margin-48 {margin: 48px !important;} .margin-64 {margin: 64px !important;} .margin-128 {margin: 128px !important;} .margin-256 {margin: 256px !important;} .margin-4B {margin-bottom: 4px !important;} .margin-8B {margin-bottom: 8px !important;} .margin-16B {margin-bottom: 16px !important;} .margin-24B {margin-bottom: 24px !important;} .margin-32B {margin-bottom: 32px !important;} .margin-48B {margin-bottom: 48px !important;} .margin-64B {margin-bottom: 64px !important;} .margin-128B {margin-bottom: 128px !important;} .margin-256B {margin-bottom: 256px !important;} .margin-4T {margin-top: 4px !important;} .margin-8T {margin-top: 8px !important;} .margin-16T {margin-top: 16px !important;} .margin-24T {margin-top: 24px !important;} .margin-32T {margin-top: 32px !important;} .margin-48T {margin-top: 48px !important;} .margin-64T {margin-top: 64px !important;} .margin-128T {margin-top: 128px !important;} .margin-256T {margin-top: 256px !important;} .margin-4R {margin-right: 4px !important;} .margin-8R {margin-right: 8px !important;} .margin-16R {margin-right: 16px !important;} .margin-24R {margin-right: 24px !important;} .margin-32R {margin-right: 32px !important;} .margin-48R {margin-right: 48px !important;} .margin-64R {margin-right: 64px !important;} .margin-128R {margin-right: 128px !important;} .margin-256R {margin-right: 256px !important;} .margin-4L {margin-left: 4px !important;} .margin-8L {margin-left: 8px !important;} .margin-16L {margin-left: 16px !important;} .margin-24L {margin-left: 24px !important;} .margin-32L {margin-left: 32px !important;} .margin-48L {margin-left: 48px !important;} .margin-64L {margin-left: 64px !important;} .margin-128L {margin-left: 128px !important;} .margin-256L {margin-left: 256px !important;} /*--------------12* FOOTER------------*/ /*FOOTER*/ .clearfix::after {content: "";clear: both;display: table;} @media screen and (max-width: 1370px) { ul.advantage-list2 li {float:left; width:300px; margin-right:30px;} }