/*=RESET STYLES
---------------*/
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,  fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;}


/*=HTML5 DISPLAY-ROLE RESET
---------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height:1;}
ol, ul {list-style:none; padding:0; margin:0;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content: none;}
table {border-collapse:collapse;border-spacing:0;line-height:1.4}


/*=PAGE STRUCTURE
-----------------*/
body {font-family:'Roboto', Arial, Helvetica, sans-serif;color:#4C4D4F; font-weight:300; font-size:100%; min-width: 1280px;}
#logo-print {display:none}
header[role="banner"] {width:100%;}
#container{}
.content-container {width:1280px;margin: 0 auto; padding:0 20px; box-sizing:border-box; padding-bottom:2em; position: relative;}
.content-container-home {width:1280px;margin: 0 auto; padding:0 20px; box-sizing:border-box;}
.group:after {visibility:hidden;display:block;content:"";clear:both;height:0;}
* html .group {zoom:1;} /* IE6 */
*:first-child+html .group {zoom:1;} /* IE7 */
.clear {clear:both;overflow:hidden;width:0;height:0;}
.move {position:absolute;left:-99999999999999px;}
.clear-lft {clear:left}
.rgt {float:right;}
.lft {float:left;}
.obj-c { margin:0 auto;display:block;text-align:center}


/*=TYPOGRAPHY
-------------*/
body {font-family:'Roboto', Arial, Helvetica, sans-serif;color:#4C4D4F; font-weight:300}
h5,h6 {font-family:'Roboto', Arial, Helvetica, sans-serif;}
h1 {font-size:1.8em;margin-bottom:.9em; }
h2 {font-size:1.4em;margin-bottom:.5em; padding:5px}
h3 {font-size: 2.1em;margin-bottom: .9em;color: #857F7D;display: block;clear: both;font-weight: 300; margin-top:2em}
h4 {font-size: 1.25em;margin-bottom:5px; font-weight: 400;padding-bottom:0; color:#2977A3; margin-top:0px; font-family:'Roboto', Arial, Helvetica, sans-serif;}
h5 {font-size:1.1em;margin-bottom:5px; font-family:'Roboto', Arial, Helvetica, sans-serif; margin-top:0; color:#85817E; font-weight:400;}
h6 {font-size:1em;}
sup {vertical-align: super;font-size:65%}
sub {font-size:65%}
b, strong {font-weight:500;}
i, em {font-style:italic;}
p{margin-bottom: 15px;line-height: 1.4; margin-top: 0; font-size: 1em; font-weight:300}


/*=HEADER
-------------*/
header{}
header h1{    float: left;
    margin: 0 0;
    position: absolute;
    border: 10px solid #fff;
    border-top: 0;
    right: 0;}
header h1 img{ display:block;}	
header h2{ float: right;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 0.6;
    margin: 35px 0;
    font-weight: 600;
    margin-right: 280px;}
header h2 span{ font-size: 14px;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    padding-top: 10px;
    display: block;
    text-align: right;}


/*=NAVIGATION
-------------*/
nav{ background:#4E5055; border-bottom:1px solid #fff;}
nav.menu ul.rep-selector{ float:right;}
nav.menu ul.rep-selector li{ display:inline-block; margin-left:10px;}
nav.menu ul.rep-selector li span em{ font-style:normal; padding:5px 20px; display:inline-block}
nav.menu ul.rep-selector li span {display: inline-block; border-radius: 0; color: #fff; position: relative; padding: 5px 5px; vertical-align: middle; font-size: 14px; border: 1px solid #fff;}
nav.menu ul.rep-selector li span:before {content: " "; position: absolute;top: -1px;left: 15px; border-top:1px solid #009EB8; width:calc(100% - 30px)}
nav.menu ul.rep-selector li span:after {content: " "; position: absolute;bottom: -1px;left: 15px; border-bottom:1px solid #009EB8; width:calc(100% - 30px)}
nav.menu ul.rep-selector li:hover span em, nav.menu ul.rep-selector li.active span em{color:#626262;background:#F3E2C6;border-color:#fff}
.trigger{ float: left; font-size: 24px; color: #fff; padding: 22px 0; position: relative; padding-left: 23px; cursor:pointer;}
.trigger span{ border-bottom: 2px solid #fff; width: 20px; height: 0; display: inline-block; margin-right: 10px; position: absolute; left: 0; top: 34px;  }
.trigger span:before{ content: ''; border-bottom: 2px solid #fff; width: 100%; height: 0; position: absolute; top: -7px; left: 0;}
.trigger span:after{ content: ''; border-bottom: 2px solid #fff; width: 100%; height: 0; position: absolute; bottom: -9px; left: 0px;}
.trigger:hover span, .trigger.active span{ border-bottom: 2px solid transparent; }
.trigger:hover span:before, .trigger.active span:before{ transform: rotate(45deg); top: -1px; width: 23px;}
.trigger:hover span:after, .trigger.active span:after{ transform: rotate(-45deg); bottom: -1px; width: 23px;}
.nav-container{ background:#4E5055;}
.nav-col{ width: 28%;    float: left;    margin-top: 30px;    margin-bottom: 30px;    box-sizing: border-box;    padding-right: 0;    border-right: 1px dashed #fff; }
.subnav-col{ width:60%; float:left; margin-top:30px; margin-bottom:30px; box-sizing:border-box;}
.nav-col ul{ padding:0; list-style-type:none; margin:0;}
.nav-col ul li{     display: block;
    margin-left: 25px;
    cursor: pointer;
    margin-bottom: 20px;
    color: #fff;
    font-size: 22px;
    position: relative;
    padding-bottom: 10px;    line-height: 1.2;}
.nav-col ul li:after{ content:''; width:10px; height:10px; background:transparent; position:absolute; left:-20px; top:5px;}
.nav-col ul li:hover{ border-bottom:1px solid #fff;}
.nav-col ul li:hover:after{ content:''; width:10px; height:10px; background:#fff; position:absolute; left:-20px;}

.subnav-col ul li a{ font-size:18px; font-weight:400; color:#fff; text-decoration:none;}
.subnav-col ul li{ padding-bottom: 10px; margin-bottom: 10px; padding-left: 30px; display:block; padding-right:10px;    width: fit-content;}
.subnav-col ul li:hover a{ color:#fff;}
.subnav-col ul li:hover{ border-bottom:1px solid #fff;}





/*=BREADCRUMB
-------------------*/
.breadcrumb {width:100%;color:#2778A7;background-color: #fff;clear: both;margin: 0 auto; min-width:1280px;}
.breadcrumb p {margin-bottom:0;padding: .4375em 0 .4375em 1.875em;font-size:.75em;width: 1260px;margin: 0 auto; background:#fff; color:#2778A7;}
.breadcrumb a:link {color:#2778A7; text-decoration:none;}
.breadcrumb a:visited {color:#2778A7;}
.breadcrumb a:hover {color:#2778A7; text-decoration:underline;}
.breadcrumb b{ font-weight:600;}


/*=UTILITY, TOOLBAR
-------------------*/
.utility{ position:absolute; top:213px; right:0;z-index: 99}
#toolbar{ padding:0; margin:0; width:50px; background:#4E5055}
#toolbar li {position: relative;text-align: right}
#toolbar li a {text-decoration:none;color:#fff;display: block;position: relative;z-index: 22;padding:8px 10px;}
#toolbar li a i { color:#fff; font-size:28px;position: relative;z-index: 22;display:inline-block;vertical-align:middle;}
#toolbar li a:hover:before {background:#F26B24;position: absolute;text-align: left; right:-20px;margin:auto;padding:10px;width:120px;left:-120px;z-index: 1}

/*=HEADER
---------*/
header[role="banner"] #logo-print {display:none}

/*=LINKS
--------*/
a {outline:none}
a:link {color:#98C6D5; font-weight:500;}
a:visited {color:#98C6D5;}
a:hover {color:#89696B;text-decoration:none;}


/*=SWITCH COLOURS
--------*/
.switch-blue{color:#2F76A2}
.switch-grey{color:#4C4D4F}
.switch-lightgrey{color:#857F7D}
.switch-black{color:#000}


.switch-light-green { color:#E3F2E7 !important}
.switch-light-grey { color:#DCDDDE !important}
.switch-light-pink { color:#D9E2ED !important}



/*=LISTS
--------*/
ul.list { list-style-image: none; margin-left: 0; font-size: 100%; line-height: 1.4; margin-top: 0; font-family: 'Roboto', Arial, Helvetica, sans-serif; padding-left: 15px; margin-bottom: 0.79em;}
ul.list li{ position:relative;}
ul.list li:before { content: ''; position: absolute; left: -15px; top: 6px; width: 7px; height: 7px; background: #4D4D4F;}

ul.list-dashed li {list-style-type:none; position:relative; margin-left:11px; line-height:1.6; font-size:100%;}
ul.list-dashed li:before {content:'\2012'; width:15px; height:0px; top:0px; left:-15px; position:absolute;}
ul.list li ul.list-dashed li:before{content: '\2013';color: #4D4D4F;position: absolute;border-radius: 0;left: -15px;top: -5px;width:30px;font-size: 22px; background:transparent}
ul.list li ul.list-dashed{ margin-left: 0; padding-left: 10px; list-style-image: none;}

ol {list-style-type:decimal; text-transform:uppercase;}
ol li { text-indent:0px; margin-left:30px;}

ol.list {list-style-type:decimal;margin-left:-3.2em;font-size: 1em;line-height:1.4; margin-top:0; text-transform:none !important; }

/*=TABLE STYLES
---------------*/
.fin-tbl tr:hover {background:#EBE9E8; color:#4C4D4F;}
 tr.no-hover:hover {background-color:#ffffff}
.fin-tbl {width:100%; margin:0 0 0 0; padding:0 0px;}
.fin-tbl tr td {padding:3px 3px 3px 3px;}
.fin-tbl th { padding:2px 3px 3px 3px; background:#EBE9E8; font-weight:500; font-family:'Roboto', Arial, Helvetica, sans-serif;}
.fin-tbl th.highlight { background:#ECEDED!important; }
.finthin {border-bottom:1px solid #D1CECC;}
.finbottom {border-bottom:1px solid #4C4D4F;}
.finthick {border-bottom:2px solid #D1CECC;}
.finthicktop {border-top:2px solid #D1CECC;}
.fintopleft {border-top:1px solid #4C4D4F; border-left:1px solid #4C4D4F;}
.fintopright {border-top:1px solid #4C4D4F; border-right:1px solid #4C4D4F;}
.finbotleft {border-bottom:1px solid #4C4D4F; border-left:1px solid #4C4D4F;}
.finbotright {border-bottom:1px solid #4C4D4F; border-right:1px solid #4C4D4F;}
.finleft {border-left:1px solid #4C4D4F;}
.finright {border-right:1px solid #4C4D4F;}
.fintop {border-top:1px solid #4C4D4F;}
.finheaderblack { background:#EBE9E8; color:#000; border-bottom:1px solid #A7A9AC; font-weight:500}
.finrightgrey {border-right:1px solid #A7A9AC;}
.finthinlightgrey {border-bottom:1px solid #A7A9AC;}
.finthicklightgrey {border-bottom:2px solid #A7A9AC;}
.finblackleft {border-left:2px solid #000;}
.dottedgreytopleft { border-top:2px dotted #4D4D4F; border-left:2px dotted #4D4D4F; padding:10px}
.dottedgreytopright { border-top:2px dotted #4D4D4F; border-right:2px dotted #4D4D4F;padding:10px}
.dottedgreybottomleft { border-bottom:2px dotted #4D4D4F; border-left:2px dotted #4D4D4F;padding:10px}
.dottedgreybottomright { border-bottom:2px dotted #4D4D4F; border-right:2px dotted #4D4D4F;padding:10px}
.fincaption{ font-size:12px!important; font-style:italic}
.whitetopline {border-top:1px solid #fff; }
.finthicklightwhite {border-bottom:5px solid #fff;}

.findarker-grey {background:#E0DEDD;}
.finthick-bltxt {border-bottom:2px solid #D1CECC; color:#000} 
.finthick-greyheader {border-bottom:2px solid #D1CECC;color:#000;background:#EBE9E8; font-weight:500;} 
.finthick-grey {color:#000;background:#EBE9E8; font-weight:500;} 
.fincolumn-bot {background:#E0DEDD; border-bottom:2px solid #fff}
.finthick-greyheader2 {border-bottom:2px solid #A7A9AC;color:#000;background:#EBE9E8; font-weight:500;} 

/*Corporate Governance - Barb
==============================*/
.finthicklightdarkb {background:#bbc9dc;color:#000}
.finthicklightdarkg {background:#d1cecc;color:#000}
.bg-darkb {background:#2778A7;color:#000}

/*Natural capital - Thabiso
==============================*/

ul.hightlight-list li {border-bottom:1px solid #A7A9AC; padding:10px;list-style-image: none;  margin-left: 0; font-size: 100%;  line-height: 1.4;  margin-top: 0;  font-family: 'Roboto', Arial, Helvetica, sans-serif; padding-left: 15px; position:relative;}
ul.hightlight-list li span {font-size:1.7em; color:#2977A3;}
ul.hightlight-list li:after {content: '';  position: absolute; left: -15px;  top: 20px;  width: 7px;   height: 7px; background: #4D4D4F;}
.ruleblk-right {border-right:2px solid #000;}
.bg-blk {color:#fff; background:#4C4D4F; padding:10px !important;}
.bg-grey {background:#EEEDED; padding:10px !important;}
.bg-lightblue {background:#E7ECF4; padding:10px !important;}
.ruledottedTB {border-top:1px dotted #000; border-bottom:1px dotted #000;}
.ruledottedB {border-bottom:1px dotted #000;}

.ruledottedTB-white {border-top:1px dotted #fff; border-bottom:1px dotted #fff;}
.ruledottedB-white {border-bottom:1px dotted #fff;}

.portfolio-large-text {position: absolute;
    top: 8.5%;
    left: 21px;
    color: #000;
    font-weight: bold;
    font-size: 65px;
    text-transform: uppercase;}


/*=Blocks
--------------------*/
.light-grey-block { background:#EEEDED; padding:30px!important}
.grey-block {padding:30px; background:#efedec;}
.group-block { border-bottom: 5px solid #E5E9F0; border-left: 5px solid #E5E9F0; border-right: 5px solid #E5E9F0; padding: 15px;}
.chairman-block { position: absolute; top: 235px; left: 737px; color:#FFFFFF}
.greybg { background:#4D4D4F;}
.block-black-big { background:#000; color:#fff; font-size: 46px;padding: 20px }

.key-blockgrey { background:#EEEDED; padding:15px}
.fin-date {font-size: 19px; color: #857F7D;}


.block-black-rot  { background:#231F20; padding:15px; color:#fff;}
.line-right { border-right:3px solid #000;}
.block-dark { background:#4C4D4F ; padding:15px; color:#fff;} 
.block-lightblue { background:#E7ECF4; padding:15px;}
.block-border { border:4px solid #2977A3; color:#2977A3;padding:15px; font-weight:500;}



/*=RISK
--------------------*/
.greybg { background:#4D4D4F;}
/*.lightgreybg { background:#DBE0EA;}*/
.mediumgreybg { background:#DCDDDE;}
.lightgreenbg { background:#E3F2E7;}
.blackbg { background:#000000; color:#FFFFFF; padding:10px}
.lightgreybg { background:#A7A9AC; color:#FFFFFF; padding:5px ; }


.lightergrey-bg {background:#D6DEE9; padding:5px ; }


/*=INTRO
--------------------*/

.introtext-large { font-size:20px !important;font-style:normal; line-height:1.5;  font-weight:300}
.introtext-med { font-size:1.5em !important;font-style:normal; line-height:1.3; font-weight:400; }
.intro { font-size:1.5em !important;font-style:normal; line-height:1.3; font-weight:400; }
.introtext-sml { font-size:1.2em !important;font-style:normal; line-height:1.3 }
.big-black { font-size:45px !important; color:#231F20;font-weight: 400; line-height: 10px;}
.medium-font { font-size:16px !important; }
.text-medium14 { font-size:22px !important; }


/*RESETS*/

.padding-30{padding: 30px;}
.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-5T{padding-top: 5px!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-10RL{padding-right: 10px!important; padding-left: 10px!important;}
.padding-10T{padding-top: 10px!important;}
.padding-10B{padding-bottom: 10px!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-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-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-25{margin: 25px!important;}
.margin-25L{margin-left: 25px!important;}
.margin-25R{margin-right: 25px!important;}
.margin-10TB{margin: 7px 0px!important;}
.margin-25T{margin-top: 25px!important;}
.margin-25B{margin-bottom: 25px!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;}

.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;}

.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;}


/*pagination*/
.pagination {margin-top:2em;background:#fff;margin-bottom:0;position: relative}
.pagination p {text-transform: uppercase;padding:0;line-height: 1; margin:15px 0;}
.pagination p i {font-style: normal;text-transform: none;font-weight: 400}
.pagination p a {display:block;}
.pagination p a:link, .pagination p a:visited {color:#2778A7;}
.pagination p a:hover {color: #2778A7;}
a#go-lft, a#go-rgt {font-weight:500;text-decoration: none;vertical-align: middle; position:relative;}
.pagination p.annual{ height: 56px; line-height: 56px; display: block; text-align: center; width: 81%; color: #fff; font-size: 15px; }
.pagination .content-container{ background:#fff;  padding-bottom:0; height: 85px;}
a#go-lft:after{width:50px; height:50px; background:#4E5055; color:#fff; content:''; position:absolute; left:0;top:0}
a#go-rgt:after{width:50px; height:50px; background:#4E5055; color:#fff; content:''; position:absolute; right:0;top:0}
a#go-lft span, a#go-rgt span{ display:inline-block;  height:50px; width:0; border-left:1px solid #2778A7;}


a#go-lft{ padding-left:70px;}
a#go-rgt{ padding-right:70px;}

a#go-lft em{
    font-style: normal;
    display: inline-block;
    position: relative;
    top: -17px;
    left: 15px;
}

.i-left {position:absolute;top: 8px;  left: 7px; font-size:2em; color:#fff; z-index:1;transform: rotate(180deg);}

.i-right {position:absolute; top: 8px; right: 7px; font-size:2em; color:#fff; z-index:1;}

a#go-rgt em{ font-style: normal;
    display: inline-block;
    position: relative;
    top: -17px;
    right: 15px;}
/*=FOOTER
---------*/
footer {margin-top:0;background:#4E5055;margin-bottom:0;position: relative; padding:20px 0;}
footer p {margin:0 0 0 0;color:#fff; text-align:center;}



/*back to top arrow*/          
#back-to-top {position:relative;text-decoration:none;font-size:2.4em;display:block;text-align:center;vertical-align:middle;-webkit-transition:all 0.6s ease;-moz-transition:all 0.6s ease;-ms-transition:all 0.6s ease;-o-transition:all 0.6s ease;transition:all 0.6s ease}