@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap');
html, body { margin: 0;  font-family: 'Lato', sans-serif;color: #4C4C4E;}


/*------*/
p{font-size: 16px; line-height: 1.4}
table, table p {font-size: 16px;line-height: 1.4}
strong, b{ font-weight: 800}

/*---H HEADINGS----*/
h1{font-size:35px;font-weight:600;text-transform:uppercase;color:#4B3832;position:relative}
h1:before {position: absolute; content: ''; border-left: 8px solid #A4CE4C; left: -17px; top: 0px; height: 50px;} 
h3{font-size:25px;font-weight:600;text-transform:uppercase;color:#5E9FBB;margin:0}
h4{font-size:20px;font-weight:600;text-transform:uppercase;color:#A5CF4B;margin:0}
h5{font-size:20px;font-weight:600;color:#796349;margin:0}
#selectable-content .container a:link, #selectable-content .container a:visited, .page-name a:link, .page-name a:visited {color:#A5CF4B; text-decoration: underline}
#selectable-content .container a:hover, .page-name a:hover{color:#4B3832; text-decoration: none}



.tbl-h4{font-size:20px;font-weight:600;color:#796349;margin:0;position:relative}
.tbl-h4:before {position: absolute; content: ''; border-left: 8px solid #A4CE4C; left: -17px; top: 0px; height: 25px;} 




/*---INTRO STYLES----*/
.intro{font-size: 30px; color: #5E4B45; line-height: 1.2;}
.intro-med{font-size: 22px; color: #5E4B45; line-height: 1.2;}

/*---RESET STYLES----*/
.obj-c {  margin-left: auto;  margin-right: auto;  display: block;   text-align: center !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;}

.padding-30{padding: 30px;}
.padding-40{padding: 40px 20px;}
.padding-50{padding: 50px 0px;}
.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-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-10T{padding-top: 10px!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-10B{padding-bottom: 10px!important;}
.padding-40T{padding-top: 40px!important;}
.padding-40B{padding-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-40T{margin-top: 40px!important;}
.margin-50T{margin-top: 50px!important;}
.margin-60T{margin-top: 60px!important;}
.margin-80T{margin-top: 80px!important;}
.margin-90T{margin-top: 90px!important;}
.margin-30B{margin-bottom: 30px!important;}

.margin-20{margin: 20px!important;}
.margin-20L{margin-left: 20px!important;}
.margin-20R{margin-right: 20px!important;}
.margin-10TB{margin: 7px 0px!important;}
.margin-20T{margin-top: 20px!important;}
.margin-20B{margin-bottom: 20px!important;}
.margin-40B{margin-bottom: 40px!important;}
.margin-80B{margin-bottom: 80px!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-15B{margin-bottom: 15px!important;}
.margin-15T{margin-top: 15px!important;}
.margin-5{margin-top: 5px!important;}
.margin-5B{margin-bottom: 5px!important;}
.margin-80T{margin-top: 80px!important;}




/*---LIST STYLES----*/
ul.list{list-style-type:none;margin:0;padding:0;margin-bottom:20px}
ul.list li{font-size: 16px; line-height: 1.4;position:relative;left:15px;line-height:1.4}
ul.list li:before{content:'';position:absolute;width:6px;height:6px;background:#404041;border-radius:50%;left:-15px;top:9px}

ul.list li ul{list-style-type:none;margin:0;padding:0;}
ul.list li ul li{position:relative;list-style-type:none;margin:0;padding:0;}
ul.list li ul li:before{width:0px;height:0px;}
ul.list li ul li:after{content:'';position:absolute;width:6px;border-bottom:1px solid #404041;left:-15px;top:12px}



/*---ACCODIAN STYLES----*/
.accordion {margin-bottom:1em;}
.accordion p  {
    font-size: 1em;
    margin-bottom: 1em;
    line-height: 1.6;
	color: #4d4d4d;
}

 .switch a {display:none;}

h4.expand{border-top: solid 1px #E1E2E3; font-weight:500;color: #4C4D4E;font-size: 18px; margin-bottom: 0px;text-transform: uppercase;}
h4.expand a {padding: 8.5px; font-size:1em;}
.expand a {display:block;margin-bottom: 15px;}
.expand a:link, .expand a:visited {color: #fff;text-decoration:none;background: #A4CE4C;position: relative;font-family: 'Roboto', sans-serif;font-weight: 500;/* text-transform: uppercase; */}
.expand a:hover, .expand a:active, .expand a:focus {background:#F0F5DE;color:#3B2A25; font-family: 'Roboto', sans-serif;font-weight: 500; }
.expand a.open:link, .expand a.open:visited {background: #F0F5DE;color: #3B2A25; font-weight: 500; font-family: 'Roboto', sans-serif; /* text-transform: uppercase; */}
.expand a:before {content:'\e936';font-family:'icomoon';speak: none;padding-right:.5em;right: 0;position: absolute; color: #016694;}
.expand a.open:before {content:'\e937';font-family:'icomoon';speak: none;padding-right:.5em}
/*tabbed accordion*/
ul.tabs {float:left;width:100%;padding:1em 0 0 0;background:transparent url(../images/nav-year-bg.png) left bottom repeat-x;margin-bottom:0 !important}
ul.tabs li {float:left;cursor: pointer;margin:0 0 0 .5em;padding:4px 10px;border:1px solid #ccc;border-bottom:none;text-decoration:none;color:#333}
ul.tabs li:first-of-type {margin:0}
ul.tabs li:hover {background:#eee}
ul.tabs li.active {padding-bottom:5px;background:#fff;border-color:#0067a4;color:#0067a4;font-weight:bold}
.tab-container {border:1px solid #0067a4;border-top:none;clear:both;float:left;width:99.796334%;background:#fff;overflow:auto;} /*980 divide 982 = 99.796334%*/
.tab-drawer-heading {display:none;}
.tab-drawer-content {padding:1em;display:none;}

div.gutter{ margin: 10px 10px;}




/*---SWITCH COLORS----*/
.switch-lgreen{color:#A5CF4B !important}
.switch-brown{color:#4B3832 !important}
.switch-lbrown{color:#796249 !important}

.switch-green{color:#4A8C3F !important}
.switch-turquoise {color:#5E9FBB !important}
.switch-darkgrey{color:#5F817A !important}
.switch-white{color:#fff !important}


.switch-bg-lgreenbot { background:#F4FAEB; border-bottom:2px solid #fff;  border-right:2px solid #fff; padding-right:5px}
.switch-bg-lgreen{ background:#F4FAEB; border-right:2px solid #fff;}



/*---TABLES STYLES----*/
.caption{ font-size: 13px !important; font-style: italic}
.figure-caption{ color:#4C4C4E!important }
table tr td{padding:5px}
.fin-tbl tr:hover {background:#F3F8EB; color:#000;} /*TABLE ON HOVER BACKGROUND COLOUR AND TEXT COLOUR*/
 tr.no-hover:hover {color:#000!important;} /*TABLE ON HOVER HIGHLIGHTED COLOUMN TEXT COLOUR TO REMAIN STAT*/
.fin-tbl {width:100%; margin:0 0 20px 0; padding:0 0px;} /*THE COMPLETE TABLE TO BE GIVEN 100% WIDTH; O MARGINS AND O PADDING*/
.fin-tbl tr td {padding: 3px 10px 3px 3px;} /*EACH CELL IN TABLE TO HAVE A PADDING OF 3 AROUND CONTENT*/
.fin-tbl th {background-color: #F3F8EB;color:#4C4C4E !important;padding: 3px 10px 3px 3px;line-height:1.4;text-align:right; font-weight: normal;} 


.fin-tbl2 tr:hover {background:#F3F8EB; color:#000;} /*TABLE ON HOVER BACKGROUND COLOUR AND TEXT COLOUR*/
 tr.no-hover:hover {color:#000!important;} /*TABLE ON HOVER HIGHLIGHTED COLOUMN TEXT COLOUR TO REMAIN STAT*/
.fin-tbl2 {width:100%; margin:0 0 20px 0; padding:0 0px;} /*THE COMPLETE TABLE TO BE GIVEN 100% WIDTH; O MARGINS AND O PADDING*/
.fin-tbl2 tr td {padding: 3px 10px 3px 3px;} /*EACH CELL IN TABLE TO HAVE A PADDING OF 3 AROUND CONTENT*/
.fin-tbl2 th {color:#4B3832 !important;padding: 3px 10px 3px 3px;line-height:1.4;text-align:right; font-weight: bold;} 


.fin-tbl3 tr:hover {background:#F3F8EB; color:#000;} /*TABLE ON HOVER BACKGROUND COLOUR AND TEXT COLOUR*/
 tr.no-hover:hover {color:#000!important;} /*TABLE ON HOVER HIGHLIGHTED COLOUMN TEXT COLOUR TO REMAIN STAT*/
.fin-tbl3 {width:100%; margin:0 0 20px 0; padding:0 0px;} /*THE COMPLETE TABLE TO BE GIVEN 100% WIDTH; O MARGINS AND O PADDING*/
.fin-tbl3 tr td {padding: 3px 10px 3px 3px;} /*EACH CELL IN TABLE TO HAVE A PADDING OF 3 AROUND CONTENT*/
.fin-tbl3 th {background-color: #F3F8EB;color:#4C4C4E !important;padding: 3px 10px 3px 3px;line-height:1.4;text-align:left; font-weight: bold;} 

.fin-headergreen{color:#fff;background:#A5CF4C;font-weight:bold}

.finthin {border-bottom:1px solid #4B3832;}
.fintop {border-top:1px solid #4B3832;}
.fintopgreen {border-top:1px solid #A5CF4D;}
.finrightgreen {border-right:1px solid #A5CF4D;}
.finright {border-right:1px solid #4B3832;}
.finleft {border-left:1px solid #4B3832;}

.finleft-white {border-left:1px solid #fff;}

.fintopleft {border-top:1px solid #4B3832;border-left:1px solid #4B3832;}
.finbotleft {border-bottom:1px solid #4B3832;border-left:1px solid #4B3832;}
.finbotright {border-bottom:1px solid #4B3832;border-right:1px solid #4B3832;}
.fintopright {border-top:1px solid #4B3832;border-right:1px solid #4B3832;}

.finthick {border-bottom:2px solid #4B3832!important;}

.finthinwhite {border-bottom:1px solid #fff!important;}
.finthintopwhite {border-top:1px solid #fff!important;}
.finrgtwhite {border-right:1px solid #fff!important;}
.finlftwhite {border-left:1px solid #fff!important;}

/*---Additional styles---*/
.green-box{background:#D6E1D1;padding:20px;margin:0}

.color1{background:red;height:150px;margin:20px 0}
.color2{background:green;height:150px;margin:20px 0}
.color3{background:orange;height:150px;margin:20px 0}
.color4{background:blue;height:150px;margin:20px 0}
.color5{background:yellow;height:150px;margin:20px 0}
.light-brown-header{background:#ECE6E0;color:#786148;font-size:20px}

/*----CEO report----*/
.chair-block{position: relative;}
.chair-block:before{content:''; position: absolute; bottom: -1.5%; width: 100%; animation: GreenLineAfter 1s ease;border-bottom: 8px solid #AFCB37;}
.chair-image{position: relative;}
.chair-image p {position: absolute; color: #fff; font-size: 14px; bottom: 5%; left: 10%; }
.chair-intro-block{margin-top: 4em;}
.chair-intro-block h1 {position: relative; line-height: 1;} 
.chair-intro-block h1:before {position: absolute; content: ''; border-left: 8px solid #A4CE4C; left: -17px; top: 22px; height: 47px;} 
.chair-intro-block h1 span {font-size: 14px; font-weight: 300; color:#4B4947; text-transform: none;  } 
						
.block-icons strong{font-size: 45px; font-weight: 600; color: #63847C}
.block-icons span{font-size: 22px; color: #63847C}
.block-icons i{font-size: 13px; font-style: normal;}
						
.greenrgtborder{border-right: 4px solid #AFCB37}
						
@keyframes GreenLineAfter{from{left:-15.5%}	
to{left:0}}




/*----Kgethego styles----*/


.img-btn-group .img-btn:last-child{margin-bottom:0px}	
#img-btn2{margin-top: 17%;}
#img-btn3{margin-top: 17%;}
#img-btn4{margin-top: 17.5%;}
.logo-circ{border-radius: 50%; padding:20px;  position: relative; width: 100%;height: 312px; z-index: 1; background:#fff}
.logo-circ:after{content: ""; border-radius: 50%;position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); border:solid 2px #A6CF4E; width: 90%; height: 280px; display:block}
.logo-circ img{width:40%; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%)}
.color-band{height:20%; margin-bottom: 2%; margin-left: -14%}
.band-cont{height:80%; transform: translatey(16%);}
#band-cont-1{background: #DBC049}
#band-cont-2{background: #95D1D1}
#band-cont-3{background: #64857C}
#band-cont-4{background: #73A6BF}
.img-btn{width: 100%; height: 17.3%; border-radius: 40px; margin-bottom: 14%; cursor: pointer; transition:0.5s ease;margin-top: 3%;}
.img-btn-group{height: 100%; position: absolute; right: 0px; top: 0px; width: 30.5%; }
		.exarro-img{position:relative; }
		.unlicked-btn{background: rgba(0,0,0,0.4)}
		.tab-exxaro-content{padding:15px 10px; border-left:2px solid; margin-top:20px}
		

		#tab-exxaro1 .tab-exxaro-content:after{content: ""; border-top: 2px solid #D5C042; height: 110%; width: 7.5%; position: absolute; top: 8%; left: -7.5%; animation: yellowTabAfter 1s ease}
		
		
		#tab-exxaro2 .tab-exxaro-content:after{content: ""; border-top: 2px solid #88D1D1; width: 7.5%; position: absolute; bottom: 47%; left: -7.5%; animation: yellowTabAfter 1s ease}
		
		#tab-exxaro3 .tab-exxaro-content:before{content:""; border-left:2px solid #60827B; height:153%; width:100%; position: absolute; top:3%; left:-2px;}
		#tab-exxaro3 .tab-exxaro-content:after{content: ""; border-top: 2px solid #60827B; width: 7.5%; position: absolute; bottom: -58%; left: -7.5%; animation: yellowTabAfter 1s ease}
		
		
		#tab-exxaro4 .tab-exxaro-content:before{content:""; border-left:2px solid #5F9FBB; height:170%; width:100%; position: absolute; top:3%; left:-2px;}
		#tab-exxaro4 .tab-exxaro-content:after{content: ""; border-top: 2px solid #5F9FBB; width: 7.5%; position: absolute; bottom: -74%; left: -7.5%; animation: yellowTabAfter 1s ease}
		
		
		#tab-exxaro1 .tab-exxaro-content{background: #F1E7C0; border-left-color: #D5C042; position:relative}
		#tab-exxaro2 .tab-exxaro-content{background: #DAEFEE; border-left-color: #88D1D1; position:relative}
		#tab-exxaro3 .tab-exxaro-content{background: #CFDAD7; border-left-color: #60827B; position:relative}
		#tab-exxaro4 .tab-exxaro-content{background: #CFE2EA; border-left-color: #5F9FBB; position:relative}
		
		#tab-exxaro1 .tab-exxaro-content p:first-child{color: #D5C042}
		#tab-exxaro2 .tab-exxaro-content p:first-child{color: #88D1D1;}
		#tab-exxaro3 .tab-exxaro-content p:first-child{color: #60827B}
		#tab-exxaro4 .tab-exxaro-content p:first-child{color: #5F9FBB}
		
		.tab-exxaro h4{position:relative; padding-left:15px;}	
		.tab-exxaro h4:before{content:""; border-left:solid 5px #000; position:absolute; animation: headBord 1s ease; height:100%; left:0; top:0}
		#tab-exxaro1 h4{color: #DAEFEE;}
		#tab-exxaro1 h4:before{border-left-color: #DAEFEE;}
		#tab-exxaro2 h4{color: #88D1D1;}
		#tab-exxaro2 h4:before{border-left-color: #88D1D1;}
		#tab-exxaro3 h4{color: #60827B;}
		#tab-exxaro3 h4:before{border-left-color: #60827B;}
		#tab-exxaro4 h4{color: #5F9FBB;}
		#tab-exxaro4 h4:before{border-left-color: #5F9FBB;}
		
		.exarro-img{z-index: 1}
		
		.tab-exxaro{margin-bottom:20px}
		
		@keyframes yellowTabAfter{
			from{left:-15.5%}	
			to{left:-7.5%}
		}
		
		@keyframes headBord{
			from{height:0%}	
			to{height:100%}
		}
		

		.crc{width: 60%; padding-top:60%; border-radius: 50%; text-align: center; position:relative; margin-bottom:20px}	
		.crc span{top: 50%; transform:translateY(-50%); position: absolute; width: 100%; left: 0%; font-size:80%}	
		.brwn-fill{background: #4B3832; color:#fff; float:right}
		.brwn-fill:after{content:""; float:none}
		.brwn-line{border:solid 1px #4B3832; color:#404041; float:left}
		.brwn-line:after{content:""; float:none}
		.green-line{border:solid 1px #A5CF4C; color:#A5CF4C; float:right}
		.green-line:after{content:""; float:none}
		.brwn-lines{border: solid 2px #4B3832; border-bottom-width: 0px; height: 30px; margin-left: 10%; width: 67%; position: relative}
		.brwn-lines:after{content:"";height:100%;width:2px; background: #4B3832; position: absolute; bottom:0%; left:50%}
		.brwn-lines:before{content:"";height:100%;width:2px; background: #4B3832; position: absolute; top:-100%; left:20%}
								
		.green-bord{border: solid 2px #A5CF4C; border-bottom-width: 0px; height: 30px; margin-left: 23%; width: 67%; position: relative}
		.green-bord:after{content:"";height:100%;width:2px; background: #A5CF4C; position: absolute; bottom:0%; left:50%}
		.green-bord2{border: solid 2px #A5CF4C; border-bottom-width: 0px; border-left-width: 0px; height: 30px; margin-left: 9%; width: 28%; position: relative}
		.green-bord2:after{content:"";height:80%;width:2px; background: #A5CF4C; position: absolute; bottom:100%; left:0%}

@media screen and (max-width:1100px){
.img-responsive{width:100%}
}

@media screen and (max-width:991px){
			
.tab-exxaro-content:after{content:none!important}
.tab-exxaro-content:before{content:none!important}

		}



@media screen and (max-width:575px){
.crc{margin:0 auto 20px auto; padding-top:50%; width:50%}
.brwn-fill{float: none}
.brwn-line{float: none}
.green-line{float: none}
.brwn-lines{display:none}
.green-bord{display:none}
.green-bord2{display:none}
}


@media screen and (max-width: 425px) {
.greenrgtborder {border-bottom: 4px solid #AFCB37; border-right: none; margin-bottom: 1em}
					
}