@charset "utf-8";
/* CSS Document */




/* CSS HOME */
a.more-link {position: relative;padding-right: 25px;font-size: 16px;font-weight: 400;color: #fff;box-sizing: border-box;transition: .35s;margin-right: 30px;display: inline-block;width: 100%; background: #000; padding: 20px;    border-radius: 15px;}
a.more-link:after {content:url('images/globe-white.png'); position:absolute; top:22px; right:31px; width:20px; height:20px;}	
a.more-link:hover {color: #fff;padding-right: 25px;transition: .35s;}
a.footer-link {position: relative;padding-right: 25px;font-size: 16px;font-weight: 400;color: #5D6F77;box-sizing: border-box;transition: .35s;margin-right: 30px;display: inline-block;}
a.footer-link:after {width: 10px;height: 10px;border-right: 2px solid #1BB0BF;border-top: 2px solid #1BB0BF;transform: rotate(45deg) translateY(-59%);position: absolute;right: 0;top: 50%;}
a.footer-link:hover {color: #1BB0BF; padding-right: 25px;transition: .35s;}


/*START OF SLIDER*/	
.slider-box{width: 100%; min-height: 550px; margin:0 auto;position:relative;padding-bottom:30px;overflow:hidden;}
input[type="radio"] {position: absolute;width: 1px; /* Setting this to 0 make it invisible for VoiceOver */height: 1px; /* Setting this to 0 make it invisible for VoiceOver */padding: 0;
margin: -1px;border: 0;clip: rect(0 0 0 0);overflow: hidden;}
label{display:block; width:20%; border: 4px solid #7889A3; position:absolute; bottom:5px;  cursor: pointer; transition: border-color 0.3s linear;}
label.second{left:27%;}
label.third{ left:55%;}
label.fouth{ left:80%;}

blockquote{ margin:0;padding:30px;width: 70%;background-color: #F5F5F5; color:#717171;position:relative;transition: background-color 0.6s linear;  float: right; margin-top: 60px;}
#second:checked ~ .two blockquote {background-color:#F5F5F5;}

.two blockquote:after{border: solid transparent; border-top-color: #717171; border-left-color:#717171;border-width: 10px;}

#third:checked ~ .three blockquote{background-color:#F5F5F5;}

.three blockquote:after{border: solid transparent; border-top-color: #7889A3;border-left-color: #7889A3;border-width: 10px;}

#fouth:checked ~ .four blockquote{background-color:#F5F5F5;}

.four blockquote:after{border: solid transparent; border-top-color: #7889A3;border-left-color: #7889A3;border-width: 10px;}



.quotes{ position:absolute;  color:#7889A3;font-size: 8em;}
.leftq{top: -55px;left: 19px;}
.rightq{bottom:-10px;right:5px;}
.slide{ position:absolute;left:-100%;opacity:0; transition: all 0.6s ease-in;}

#first:checked ~ label.first { border-width:6px; border-color:#000;}
#second:checked ~ label.second { border-width:6px; border-color:#000;}
#third:checked ~ label.third {border:6px solid #000;}
#fouth:checked ~ label.fouth {border:6px solid #000;}

#first:checked ~ div.one {left:0;opacity:1;width: 100%;}
#second:checked ~ div.two {left:0;opacity:1;}
#third:checked ~ div.three {left:0;opacity:1;}
#fouth:checked ~ div.four {left:0;opacity:1;}
.intro-slider{font-size: 25px;font-weight: 400;}
.circle-border{border-radius: 50%;}		

/*END OF SLIDER*/	

/*new accordions*/
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid gray;width: 100%;}
ul.tabs li {float: left;margin: 0;cursor: pointer;padding: 0px 5px;height: auto;line-height: 31px;border-top: 1px solid #333;border-left: 1px solid #333;border-bottom: 1px solid #333;  background-color: #666;color: #ccc;overflow: hidden;position: relative;}
.tab_last { border-right: 1px solid #333;}
ul.tabs li:hover { background-color: #ccc; color: #333;}
ul.tabs li.active {background-color: #fff;color: #333;border-bottom: 1px solid #fff;display: block;}
.tab_container {border: 1px solid #333;border-top: none;clear: both;float: left;width: 100%;background: #fff;overflow: auto;}
.tab_content {padding: 20px;display: none;}
.tab_drawer_heading {display: none;}	
ul.sustain-list {list-style:none; margin:0px; padding:0px;}
ul.sustain-list li {float:left; width:50%;}
.sustain-bold {color:#7889A3; font-size:16px; font-weight:500;}
.sustain-italic {font-size:15px; font-style:italic;}	
.font-20{ font-size: 20px}	
.home-box {width:100%; float: left; }
.home-box ul {list-style:none; margin:0; padding:0; clear:both;}
.home-box ul li {float:left; width:20%;  box-sizing:border-box;  position:relative; text-align: center; padding: 50px}
.home-box ul li div {position:absolute; bottom:0px; right:0px;}
.home-box ul li:last-of-type {margin-right:0%;}
.home-li-first{border-top: 1px solid #000; border-left: 1px dotted #000;border-bottom: 1px dotted #000; border-right: 1px dotted;}	
.home-li-second{border-top: 1px solid #000; border-bottom: 1px dotted #000; border-right: 1px dotted;}		
.home-li-third{border-left: 1px dotted #000;border-bottom: 1px dotted #000; border-right: 1px dotted;}
.home-li-fourth{border-bottom: 1px dotted #000; border-right: 1px dotted;}	

.KPI-box {width:50%; background:#fff; margin:0 auto;}
.KPI-box ul {list-style:none; margin:0; padding:0; width:100%; margin-top:40px; margin-bottom:40px;}
.KPI-box ul li {float:left; width:33.33%; border-top:1px solid #000; border-bottom:1px solid #000; box-sizing:border-box; padding:30px; min-height: 270px}
.KPI-box ul li:nth-child(1) {border-left:1px solid #000; border-right:1px solid #000;}
.KPI-box ul li:nth-child(2) {border-right:1px solid #000;}
.KPI-box ul li:nth-child(3) {border-right:1px solid #000;}




.review-button{float: right;position: absolute;top: 350px;left: 472px;margin-top: 60px;}
.review-button-2{float: right;position: absolute;top: 350px;left: 472px;margin-top: 60px;}
.review-button-3{float: right;position: absolute;top: 289px;margin-top: 60px;}


/* CSS GOVERNANCE */
.story-outter-block{width: 80%; margin: 0 auto; padding: 20px}
.font-16{font-size: 16px!important}
.font-20{font-size: 20px!important}
.icon-grey{ color: #D0D5D9!important}
.story-image{width: 100%; margin: 0 auto; overflow: auto; position: relative}
.story-image-1{width: 24%; float: left;}
.story-image-2{width: 74%; float: left; padding: 10px; min-height: 223px; background: #F1F3F4}
.story-image-2:before {content: '';width: 100%;height: 5px;position: absolute;top: 0;left: 49.5%;transform: translateX(-50%);background: linear-gradient(90deg, #671c78, #064181, #1970b5, #1281ae, #19a1d5, #1bb0bf, #61af58, #808080);background-size: 500% 100%;-webkit-animation: gradscroll 10s ease infinite;-moz-animation: gradscroll 10s ease infinite;  animation: gradscroll 10s ease infinite;}
.social-box{width: 100%; overflow: auto; padding: 10px; border-top: 1px solid #D0D5D9; border-bottom: 1px solid #D0D5D9}
.social-box-1{width: 48%; margin-right: 4%; float: left; text-align: right}
.social-box-2{width: 48%; float: left}

.financial-box {width:100%; float: left; }
.financial-box ul {list-style:none; margin:0; padding:0; clear:both;}
.financial-box ul li {float:left; width:33%;  box-sizing:border-box;  position:relative; text-align: center; padding: 30px; min-height: 170px}
.financial-box ul li div {position:absolute; bottom:0px; right:0px;}
.financial-box ul li:last-of-type {margin-right:0%;}
.financial-li-first{border-top: 1px solid #000; border-left: 1px dotted #000;border-bottom: 1px dotted #000; border-right: 1px dotted;}
.financial-li-second{border-top: 1px solid #000; border-bottom: 1px dotted #000; border-right: 1px dotted;}
.financial-li-third{border-left: 1px dotted #000;border-bottom: 1px dotted #000; border-right: 1px dotted;}
.financial-li-fourth{border-bottom: 1px dotted #000; border-right: 1px dotted;}
.stakeholder-borderbot{border-bottom: 1px solid #717171;}



.purpose{}
.purpose .col-2{}
.purpose .col-2:last-of-type{}
.purpose-list-img{width: 50%; float: left; position: relative;}
.purpose-list-img img{ max-width: 100%;	}
.purpose-list-img:before {content: '';position: absolute;width: 220px;height: 1px;top: 50%;right: 97%;}


.purpose-list-container{width: 100%;position: relative;}
.purpose-list-container:after {content: '';	position: absolute;	height: 33px;	width: 100px;	left: -10px;	top: 41%;border-bottom: none!important	}

.purpose-list-container .purpose-list{    list-style: none;    padding-left: 0px!important;        position: relative;    float: left;    width: 100%; margin: 0px!important; border-left: none!important}
.purpose-list-container .purpose-list:after {	content: '';	position: absolute;		height: 31px;	width: 1px;	left: -1px;	bottom: 0;}

.purpose-list-container .purpose-list:before { content: ''; position: absolute;  }
.purpose-list-container .purpose-list li{ cursor:pointer;float: left;width: 20%; text-align: left!important; padding: 0px!important}
.purpose-list-container .purpose-list li:before {content: '';top: 50%;border: none!important}

.purpose-list-container .purpose-list li:after{ content: '\e807'; position: absolute; border-radius: 50%; width: 30px;height: 30px; right: -23px; top: 9px;font-family: 'icomoon'; line-height: 30px;text-align: center;  visibility: hidden;	}
.purpose-list-container .purpose-list li.active:after{display: none!important}
.purpose-cont{}
.purpose-cont h4{ font-size: 18px; font-weight: 500; margin-bottom: 20px; margin-top: 30px;}
.purpose-cont h5{font-size: 31px; font-weight: 500;color: #5A7795;margin-top: 0;line-height: 1;}

.purpose .col-2 p.font-20 {max-width: 50%;}
.purpose { margin-bottom: 120px;}

/*ABOUT ACCORDIONS*/
.fin-accordions {display:none;}
.fin-about {background-color: #7889A3;color: #fff;cursor: pointer;padding: 18px;width: 100%;text-align: left;border: none;outline: none;transition: 0.4s; border-bottom:1px solid #5A7795; font-size:16px; color:#fff;margin-bottom: 20px}
.fin-about:after {content: '\02795'; font-size: 13px;color: #fff;float: right; margin-left: 5px;}
/*.active:after {content: '\2796';}*/
.fin-about.active, .fin-about:hover {background-color: #000;}
.panel-fin {padding-top:20px;padding-bottom: 20px;background-color: #fff;display: none;overflow: hidden;}
.col-50 {
float: left;
width: 50%;
box-sizing: border-box; m
}
ul.list-note {padding-left: 0; /*! list-style: none; */ margin-top: 20px;}
ul.list-note li {padding-left: 5px; position: relative; font-size: 14px!important; line-height: 1.9;margin-left: 15px;}
ul.list-note li:after { /*! content: '.'; */color: #4C4D4F; position: absolute; left: 0; font-size:60px; font-weight: 300; top: -61px; border-radius:50%;}	
	.dotted-top{border-top: 1px dotted#000;}

	.timeframe-block{  background: #7889A3;color: #fff;padding: 10px;border-radius: 25px;  margin: 0 auto; margin-bottom: 0px;text-align: center;margin-bottom: 30px;}	
	

	.fin-tbl tr:hover {background:#F5F5F5; color:#000;} /*TABLE ON HOVER BACKGROUND COLOUR AND TEXT COLOUR*/
tr.no-hover:hover {color:#203263!important;} /*TABLE ON HOVER HIGHLIGHTED COLOUMN TEXT COLOUR TO REMAIN STAT*/
.fin-tbl {width:100%; margin:0 0 0 0; padding:0 0px; margin-top:25px;} /*THE COMPLETE TABLE TO BE GIVEN 100% WIDTH; O MARGINS AND O PADDING*/
.fin-tbl tr td {/*line-height:1.3font-size:16px!important;*/padding: 3px 10px 3px 3px;font-size: 15px;} /*EACH CELL IN TABLE TO HAVE A PADDING OF 3 AROUND CONTENT*/
.fin-tbl th {color:#000; font-weight:500; background:#F5F5F5; /*line-height:1.3;*/ padding:3px 10px 3px 3px;font-size:16px!important;font-family: raleway, sans-serif;} /*THE HIGHLIGHTED COLUMN BACKGROUND COLOUR; TEXT COLOUR; PADDING AND A FONT WEIGHT IF NEEDED*/
.finthinline {border-bottom:1px solid #000;}
.finthickline {border-bottom:2px solid #000;}
.finright {border-right:1px solid #000;}
.finleft {border-left:1px solid #000;}	
.font-20{font-size: 20px!important;}

.img-responsive {max-width:100%;}
.corp-gov-responsive {max-width:100%;}








@media screen and (max-width: 1280px) {
blockquote{ margin:0;padding:30px;width: 60%;background-color: #F5F5F5; color:#717171;position:relative;transition: background-color 0.6s linear;  float: right; margin-top: 60px;}
 
.intro-slider {
  font-size: 18px;
  font-weight: 400;
}	
.img-responsive {max-width:100%;}
.corp-gov-responsive {max-width:100%;}	
	
.KPI-box ul li {
    width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  padding: 30px;
  min-height: 0px;
	margin-top: 15px;}
.KPI-box ul li:nth-child(2) {border-right:1px solid #000;border-left:1px solid #000;}
.KPI-box ul li:nth-child(3) {border-right:1px solid #000;border-left:1px solid #000;}	
	
	
	
	
	
}
@media screen and (max-width: 1080px) {
blockquote {
  margin: 0;
    margin-top: 0px;
  padding: 30px;
  width: 50%;
  background-color: #F5F5F5;
  color: #717171;
  position: relative;
  transition: background-color 0.6s linear;
  float: right;
  margin-top: 60px;
}
.intro-slider {
  font-size: 16px;
  font-weight: 400;
}	
.img-responsive {max-width:100%;}
.corp-gov-responsive {max-width:100%;}	
.KPI-box ul li {
    width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  padding: 30px;
  min-height: 0px;
	margin-top: 15px;}
.KPI-box ul li:nth-child(2) {border-right:1px solid #000;border-left:1px solid #000;}
.KPI-box ul li:nth-child(3) {border-right:1px solid #000;border-left:1px solid #000;}	
	.padding-100R{ padding-right: 100px}	
.padding-100R{ padding-right: 0px!important}	
	
	
}

@media screen and (max-width: 889px) {
blockquote{ margin:0;padding:30px;width: 100%;background-color: #F5F5F5; color:#717171;position:relative;transition: background-color 0.6s linear; margin-top: 60px;}
 
.intro-slider {
  font-size: 18px;
  font-weight: 400;
}	
.slider-box {
  width: 100%;
  min-height: 500px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 30px;
  overflow: hidden;
}	
.img-display{ display: none}
.review-button {
    position: absolute;
  top: 315px;
  left: 0px;
  margin-top: 60px;
}
.review-button-2 {
   position: absolute;
  top: 315px;
  left: 0px;
  margin-top: 60px;
}	
	
.review-button-3 {
  float: right;
  position: absolute;
  top: 260px;
  margin-top: 60px;
}	
	
}



@media screen and (max-width: 425px) {
	
.intro-text {
  font-size: 30px!important;
  color: #717171;
}	
	
.intro-slider {
  font-size: 16px;
  font-weight: 400;
}

.review-button {
  position: absolute;
  top: 390px;
  left: 0px;
  margin-top: 60px;
  font-size: 14px!important;
}	
	
.review-button-2 {
  position: absolute;
  top: 393px;
  left: 0px;
  margin-top: 60px;
  font-size: 14px!important;	
}	
	
.slider-box {
  width: 100%;
  min-height: 670px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 30px;
  overflow: hidden;
}	
.review-button-3 {
  float: right;
  position: absolute;
  top: 370px;
  margin-top: 60px;
}
ul.sustain-list li {
   width: 100%; 
}	
	.top-margin{ margin-top:  45px!important}	
.KPI-box {
  width: 100%;
  background: #fff;
  margin: 0 auto;
}	
	
	
}



@media screen and (max-width: 320px) {
.intro-text {
  font-size: 30px!important;
  color: #717171;
}
	
.review-button {
  position: absolute;
  top: 583px;
  left: 0px;
  margin-top: 60px;
  font-size: 10px !important;
  }	
	
.slider-box {
  width: 100%;
  min-height: 650px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 30px;
  overflow: auto;
}	
	
.button {
  position: relative;
  padding: 1em 1.5em;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  font-size: 12px!important;
  margin: 1em 0.8em;
  font-weight: 500;
}	
	
.button {
  max-width: 100%!important;
}	
blockquote {
  margin: 0;
    margin-top: 0px;
  padding: 0px!important;
  width: 100%;
  background-color: #F5F5F5;
  color: #717171;
  position: relative;
  transition: background-color 0.6s linear;
  margin-top: 60px;
}	
	
.review-button-2 {
  position: absolute;
  top: 480px;
  left: 0px;
  margin-top: 60px;
  font-size: 14px !important;
}
	
.review-button-3 {
    position: absolute;
  top: 400px;
  margin-top: 60px;
}	
	
.review-button {
  position: absolute;
  top: 483px;
  left: 0px;
  margin-top: 60px;
  font-size: 10px !important;
}	
	
	

}