@font-face {
	font-family: 'Telkom123 Regular';
	src: url("../fonts/Telkom123-Regular.eot");
	src: url("../fonts/Telkom123-Regular.eot") format("embedded-opentype"), url("../fonts/Telkom123-Regular.woff") format("woff"), url("../fonts/Telkom123-Regular.ttf") format("opentype"), url("../fonts/Telkom123-Regular.svg") format("svg");
}

table tr td {
	padding: 5px
}
.finheaderwhite{ background:#fff; color: #006198!important; font-weight: 300;font-family: Telkom123 Regular;border-bottom: 3px solid #0083C2}
.title-bg {
    background-color: #DCECF8;
    padding: 20px;
}
ul.dash-blue {
	position: relative;
	list-style: none;

	li::before {
		position: absolute;
		left: 16px;
		content: '';
		width: 10px;
		border-bottom: 2px solid #5E9DCD;
		margin-top: 11px;
	}
}

.items-arrow-blue {
	position: relative;
	left: 40px;
	font-weight: 600;
	color: #32BBDA;
	font-family: Telkom123 Bold;
}

.items-arrow-blue::before {
	content: "\e944";
	position: absolute;
	font-family: 'icomoon';
	top: 0;
	left: -40px;
	background: #fff;
	border-radius: 50%;
	color: #32BBDA;
	height: 30px;
	width: 30px;
	text-align: center;
	padding-top: 4px;
	border: 1px solid #32BBDA;
}

.items-arrow-blue2 {
	position: relative;
	left: 40px;
	font-weight: 600;
	color: #007BBE;
	font-family: Telkom123 Bold;
}

.items-arrow-blue2::before {
	content: "\e944";
	position: absolute;
	font-family: 'icomoon';
	top: 0;
	left: -40px;
	background: #fff;
	border-radius: 50%;
	color: #007BBE;
	height: 30px;
	width: 30px;
	text-align: center;
	padding-top: 4px;
	border: 1px solid #007BBE;
}

.items-grey-bg {
	background: #E6EDF0;
	margin-left: 10px;
	position: relative;
	padding: 15px;
	min-height: calc(100% - 37px);
	margin-bottom: 25px
}

.items-grey-bg:before {
	position: absolute;
	content: '';
	border-left: 3px solid #32BBDA;
	height: 100%;
	left: -10px;
	top: 0px
}

.items-grey-bg2 {
	background: #E6EDF0;
	margin-left: 10px;
	position: relative;
	padding: 15px;
	min-height: calc(100% - 37px);
	margin-bottom: 25px
}

.items-grey-bg2:before {
	position: absolute;
	content: '';
	border-left: 3px solid #007BBE;
	height: 100%;
	left: -10px;
	top: 0px
}

.gcfo-img2 {
	position: relative;
}

.gcfo-img2 p {
	position: absolute;
	bottom: 50px;
	right: 80px;
	font-weight: 600;
	font-size: 16px
}

.custom-question {
	position: relative;
	padding-left: 40px;
}

.custom-question::before {
	content: "Q";
	position: absolute;
	top: 0;
	left: 0;
	background: #44C7EE;
	border-radius: 50%;
	color: #fff;
	height: 30px;
	width: 30px;
	text-align: center;
	font-weight: 600 !important;
	font-family: 'Telkom123 Bold';
	padding-top: 2px;


}

.custom-answear {
	position: relative;
	padding-left: 40px;
}

.custom-answear::before {
	content: "A";
	position: absolute;
	top: 0;
	left: 0;
	background: #44C7EE;
	border-radius: 50%;
	color: #fff;
	height: 30px;
	width: 30px;
	text-align: center;
	font-weight: 600 !important;
	font-family: 'Telkom123 Bold';
}

.custom-answear::after {
	content: "\e944";
	position: absolute;
	font-family: 'icomoon';
	top: 40px;
	left: 0;
	background: #fff;
	border-radius: 50%;
	color: #44C7EE;
	height: 30px;
	width: 30px;
	text-align: center;
	padding-top: 4px;
	border: 1px solid #44C7EE;
}

.lblue-bdr-left {
	position: relative;
}

.custom-question p {
	margin-bottom: 30px;
}

.lblue-bdr-left::before {
	content: "";
	position: absolute;
	border-left: 1px solid #44C7EE;
	bottom: 0;
	left: -26px;
	min-height: calc(100% - 76px);
	width: 1px;
}

.custom-answears {
	position: relative;
	padding-left: 40px;
}

.switch-bluebg {
	background: #C9E5F9;
}

.custom-question2 {
	position: relative;
	padding-left: 40px;
}

.custom-question2::before {
	content: "Q";
	position: absolute;
	top: 0;
	left: 0;
	background: #0079BD;
	border-radius: 50%;
	color: #fff;
	height: 30px;
	width: 30px;
	text-align: center;
	font-weight: 600 !important;
	font-family: 'Telkom123 Bold';
	padding-top: 2px;
}

.custom-answear2 {
	position: relative;
	padding-left: 40px;
}

.custom-answear2::before {
	content: "A";
	position: absolute;
	top: 0;
	left: 0;
	background: #0079BD;
	border-radius: 50%;
	color: #fff;
	height: 30px;
	width: 30px;
	text-align: center;
	font-weight: 600 !important;
	font-family: 'Telkom123 Bold';
}

.custom-answear2::after {
	content: "\e944";
	position: absolute;
	font-family: 'icomoon';
	top: 40px;
	left: 0;
	border-radius: 50%;
	color: #0079BD;
	height: 30px;
	width: 30px;
	text-align: center;
	padding-top: 4px;
	border: 1px solid #0079BD;
}

.lblue-bdr-left2 {
	position: relative;
}

.lblue-bdr-left2::before {
	content: "";
	position: absolute;
	border-left: 1px solid #0079BD;
	bottom: 0;
	left: -26px;
	min-height: calc(100% - 76px);
	width: 1px;
}

.limit-h50-bdr::before {
	min-height: calc(100% - 76px);
}

.limit-h65-bdr::before {
	min-height: calc(100% - 76px);
}

.finthin-blue-white-left {
	border-bottom: 1px solid #005892;
	border-left: 1px solid #fff;
}



.bannertop {
	background-image: url("../images/banners/introduction-statements-banner.png");
	background-repeat: no-repeat;
}





.intro-lrg {
	font-family: 'Telkom123 Regular', 'Calibri', Arial, Helvetica, sans-serif;
	color: #0083C1;
	font-size: 24px;
	margin: 0;
	line-height: 1.3;
	margin-bottom: 20px;
	text-align: left;
	font-weight: 600;
}
.intro {
	font-family: 'Telkom123 Regular', 'Calibri', Arial, Helvetica, sans-serif;
	color: #0083C1 !important;;
	font-size: 19px;
	margin: 0;
	line-height: 1.4;
	margin-bottom: 20px;
	text-align: left;
	font-weight: 600;
}
.intro-lt {
	font-family: 'Telkom123 Regular', 'Calibri', Arial, Helvetica, sans-serif;
	color: #04C3DE;
	font-size: 21px;
	margin: 0;
	line-height: 1.3;
	margin-bottom: 20px;
	text-align: left;
	font-weight: 400;
}

.intro-med {
	font-family: 'Telkom123 Regular', 'Calibri', Arial, Helvetica, sans-serif;
	color: #0083C1 !important;
	font-size: 19px;
	margin: 0;
	line-height: 1.4;
	margin-bottom: 20px;
	font-weight: 400;

}

.intro-small {
	font-size: 17px;
	color: #0079BD;
	font-weight: 600;
}

.fw-600 {
	font-weight: 600 !important;
}

.fw-500 {
	font-weight: 500 !important;
}

.intro-sml {
	font-family: 'Telkom123 Light', sans-serif;
	color: #0083C1;
	font-size: 17px;
	margin: 0;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 20px;
}

.intro-med-light-grey {
	font-family: 'Telkom123 Light', 'Calibri', Arial, Helvetica, sans-serif;
	color: #58585A;
	font-size: 20px;
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 20px;
}

.regular-bold {
	font-family: 'Telkom123 Regular', 'Calibri', Arial, Helvetica, sans-serif;
	font-weight: 600;
}

.telkom-light {
	font-family: 'Telkom123 Light', 'Calibri', Arial, Helvetica, sans-serif !important;
}

.telkom-regular {
	font-family: "Telkom123 Regular Italic ", Arial, Helvetica, sans-serif !important;
}

.pivot-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #00B5EF;
	color: #fff;
	font-weight: 600;
	text-align: center;
	padding: 3px;
	display: inline-block;
}

.circle-block {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px dashed #007BBE;
	color: #007BBE;
	font-weight: 600;
	text-align: center;
	padding: 3px;
}

.navi-num-block2 {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 2px;
	background-color: #00519C;
	text-align: center;
display: inline-block;
	font-weight: 600;
	color: #fff;

	margin-bottom: 8px;

}

.navi-num-block3 {
	position: relative;
	width: 33px;
	height: 30px;
	padding: 7px 4px;
	;
	background-color: #014593;
	text-align: center;
	align-items: center;
	font-weight: 600;
	color: #fff;
	font-size: 10px;
	margin-bottom: 8px;
}

.navi-num-block4 {
	position: relative;
	width: 30px;
	height: 30px;
	padding: 2px;
	background-color: transparent;
	text-align: center;
	border: 1px solid #6D6D6D;

	font-weight: 600;
	color: #6D6D6D;

	margin-bottom: 8px;

}

.king-iconlft {
	position: relative
}

.king-iconlft img {
	position: absolute;
	left: -32px;
}

.pad-60T .grey-bg p small {
	font-size: 14px;
	font-weight: 300;
}

.blue-line-across {
	border-bottom: 1px solid #007BBE;
	margin-bottom: 15px;
}

.grey-bg {
	background: #EEF0F0;
	padding: 30px;
}

.pad-60T {
	padding-top: 60px
}

.capital-bkr {
	background: linear-gradient(0deg, rgba(144, 182, 208, 1) 21%, rgba(2, 89, 147, 1) 73%);
	padding: 20px;
	padding-right: 60px;
	position: relative
}

.capital-block {
	position: relative;
}

.capital-block:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 30px;
	background: rgba(159, 201, 227, 0.5);
	right: 0;
	top: 0
}

.capital-bkr:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 30px;
	background: rgba(159, 201, 227, 0.3);
	right: 0;
	top: 0
}

.capital-h1 {
	color: #fff;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	margin-bottom: 20px;
	padding: 30px 0;
	padding-bottom: 55px;
}

.capital-h1 h1 {
	line-height: 1
}

.bkr-lrblue {
	background: #D9EFFC;
	padding: 20px;
}

.human-grey-gradient {
	background: linear-gradient(97deg, rgba(201, 206, 210, 1) 30%, rgba(253, 254, 254, 1) 84%);
	padding: 40px 0;
	background-position: bottom left;
	background-repeat: no-repeat
}

.round-init {
	width: 30px;
	height: 30px;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	place-items: center;
	padding: 20px;
	font-size: 12px;
	font-weight: 400;
	border-radius: 50%;
}

.supporting-bkr {

	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 40px
}

.leadership-talent-block {

	background-repeat: no-repeat;
	background-size: cover
}

.white-bkr-opacity {
	background: rgba(239, 241, 242, 0.9);
	padding: 60px 30px
}

.blue-bkr-opacity {
	background: rgba(146, 195, 229, 0.9);
	padding: 40px 30px
}

.blue-bkr-opacity2 {
	background: rgba(155, 203, 236, 1);
	padding: 40px 30px
}

.blue-bkr-opacity3 {
	background: rgba(203, 233, 250, 1);
	padding: 40px 30px
}

.switch-bg-l-blue-2 {
	background: #5495C9
}

.switch-bg-l-blue-3 {
	background: #C7D7DD
}

.switch-bg-l-blue-4 {
	background: #DCE6EA
}

.switch-dblue {
	color: #005892 !important
}

.switch-pink {
	color: #E5007D !important
}

.switch-bg-l-blue-5 {
	background: #D1DEE3
}

.switch-bg-l-blue-6 {
	background: #EAF0F3
}

.switch-bg-l-blue-7 {
	background: #BDE3F8
}

.coloum-dir {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ips-huge-num {
	font-size: 50px;
	margin-bottom: 10px;
	font-family: 'Telkom123 bold', 'Calibri', Arial, Helvetica, sans-serif;
}

.ips-huge-num sup {
	font-size: 50%;
	top: -1.5rem;
}

.ips-huge-num sup img {
	margin-top: -8px;
	width: 24px;
}


.ips-inner-holder {
	display: flex;
	justify-content: space-between;
	height: 100%;
}

.ips-inner-left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 60%;
}

.ips-inner-left p {
	text-align: left;
	color: #575656;
}

.growth-arrow {
	position: relative;
	margin-right: 100px;
}

.growth-arrow span {
	text-align: center;
	display: block;
}

.growth-arrow img {
	height: 90px;
}

.down-arr {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.up-arr {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.def-flex-col {
	margin-top: 10px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: self-start;
	margin-bottom: 5px;
}

.letter-circle {
	background: #00ADE9;
	text-align: center;
	padding: 8px 15px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 14px !important;
	font-weight: 700;
	color: #fff;
	margin-left: 7px;
}

.switch-bg-table {
	background: #EAF0F3;
	padding: 20px;
}

.switch-bg-table table tr td strong {
	color: #fff;
	padding: 20px 7px;
}

.fin-white-line {
	border-right: 2px solid #fff;
	margin-right: 15px;
}

.no-br {
	border-radius: 0;
}

.add-bdr {
	border-radius: 0;
	border: 1px solid #54616C;
	background: transparent;
}

.add-dotted-bdr {
	border: 1px dotted #007BBE;
	background: transparent;
}


.list ul {
	margin: 0 !important;
	padding: 0 !important;
	margin-top: 4px !important
}

.list ul.arrow-list li {
	list-style-type: none !important
}

.list ul.arrow-list li:before {
	border-bottom: none !important;
	content: "\e93c" !important;
	font-family: 'icomoon' !important;
	top: 7px !important;
	font-size: 12px !important;
	font-weight: bold !important;
	color: #818285 !important
}

.border-box {
	border: 1px solid #000;
}

.col-tbl-img-block {
	position: relative;
}

.col-tbl-img {
	position: absolute;
	max-width: 97%;
	left: 50%;
	transform: translate(-50%, -47%);
}

.color-table {
	padding-left: 10px;
	margin-bottom: 30px
}

.color-table .row.no-gutters div div {
	padding: 10px 20px
}

.color-table .row .col-lg-6 div {
	border-bottom: 1px solid #004F9E;
	height: 100%
}

.color-table .row:nth-child(2) .col-lg-6 div {
	border-bottom: 1px solid #0083C3
}

.color-table .row .col-lg-6:nth-child(odd) div {
	border-right: 1px solid #0083C3
}

.col-tbl-hd {
	flex: 1;
}

.borderrgt {
	border-right: 2px solid #0083C2
}

.navy-bkr {
	background: #121740;
}

.bordertop-dblue {
	border-top: 1px solid #121740;
}

.bordertop-green {
	border-top: 1px solid #0DB14B;
}

.finthingrey {
	border-bottom: 1px solid #939598
}

.finthinwhite {
	border-bottom: 1px solid #fff
}

.finleftwhite {
	border-left: 1px solid #fff
}

.finthickwhite {
	border-bottom: 2px solid #fff
}


.finthick {
	border-bottom: 3px solid #0083C2 !important;
}

.finthickright {
	border-right: 3px solid #0083C2
}

.lft {
	text-align: left;
}

.bordertopblock {
	background: #EAF0F3;
	padding: 20px 10px;
	border-top: 2px solid #007BBD;
	margin: 20px 0
}



.stakeholdersvalue-block {
	background-image: linear-gradient(#fff, #52CAEE);
	padding: 15px;
	min-height: 145px;
}

.stakeholdersvalue-box {
	background: #DFE8EA;
	padding: 20px;
	height: 100%
}

.b-border {
	border-right: 4px solid #0083C2
}

.lb-border {
	border-right: 4px solid #00B5EF
}

.llb-border {
	border-right: 4px solid #49C7ED
}

.grey-border {
	border-right: 4px solid #A9C4CB
}

.stakeholdersvalue-box p {
	transform: translate(0, -50%) !important;
	top: 50%;
	font-weight: 600;
	color: #0083C1;
	position: absolute;
	font-family: 'Telkom123 Bold', 'Calibri', Arial, Helvetica, sans-serif;
	text-align: left;
}

.stakeholdersvalue-block p {
	transform: translate(-50%, -50%) !important;
	top: 50%;
	left: 50%;
	color: #404042;
	position: absolute;
	font-size: 22px;
	font-weight: 700;
	text-align: center
}

.valueintro-block {
	border-bottom: 1px solid #939598;
	position: relative
}

.valueintro-block:before {
	content: '';
	border-bottom: 1px solid #939598;
	width: 80px;
	left: -80px;
	bottom: -1px;
	position: absolute
}

.valueintro-block:after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #939598;
	left: -82px;
	bottom: -3px;
	position: absolute;
}

.finright-blue {
	border-right: 1px solid #0083C2
}

.finright-grey {
	border-right: 1px solid #A1ABB2
}

.finright-white {
	border-right: 1px solid #fff
}

.risk-grey {
	background: #DFE8EA;
	padding-left: 30px
}

.capitalblueblock {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 3%, rgba(4, 133, 195, 1) 100%);
	padding-top: 42px
}

.capital-box {
	background: linear-gradient(90deg, rgba(169, 195, 203, 1) 3%, rgba(5, 102, 156, 1) 100%);
	padding: 30px;
	padding-left: 15px
}

.capital-box h1 {
	color: #fff;
	margin: 0
}

.capital-greybg {
	background: #DFE8EA;
	padding: 35px 30px;
	height: 100%;
	padding-left: 80px
}

.capital-greybg h3 {}

.capital-wrapper {
	width: calc(100% - 154px);
	margin: 0 auto;
}

.capital-greybg p {
	text-align: left;
}

.capitals-circle span {
	text-align: center
}

.capitals-circle {
	width: 40% !important;
	margin: 0 auto;
	margin-bottom: 30px;
}

.capitals-circle:before {
	content: '';
	position: absolute;
	width: 1px;
	border-bottom: 1px solid #007BBE;
	right: 50%;
	height: 43px;
	top: auto;
	bottom: -32px;
	background: #007BBE;
}

.capitals-circle:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	right: 20px;
	top: 49%;
	background: #007BBE;
	top: auto;
	bottom: 9px;
	right: 48.7%;
}

.capitals-textborder p {
	color: #626366;
	font-weight: 600;
	font-family: 'Telkom123 Regular', 'Calibri', Arial, Helvetica, sans-serif;
}

.left-page-icons {
	position: relative;
	width: 0px;
	height: 30px;
	margin: 1px;
	left: -40px;
	bottom: 0;
	float: left
}

ul.list {
	padding: 0;
	margin: 0;
	list-style-type: none;
	margin-bottom: 20px
}

ul.list li {
	padding-left: 20px;
	position: relative;
	font-size: 15px;
	padding-bottom: 4px;
	color: #000;
}

ul.list li:before {
	left: 0;
	position: absolute;
	content: '';
	top: 10px;
	width: 10px;
	border-bottom: 1px solid #000;
}

ul.dot {
	padding: 0;
	margin: 0;
	list-style-type: none;
	margin-bottom: 20px
}

ul.dot li {
	padding-left: 15px;
	position: relative;
	font-size: 15px;
	padding-bottom: 4px;
	color: #000
}

ul.dot li:before {
	left: 0;
	position: absolute;
	content: '';
	top: 10px;
	height: 5px;
	width: 5px;
	border-radius: 50%;
	background: #000;
	border-bottom: none;
}

ul.list-number-notes {
	list-style-type: decimal;
	margin: 0px;
	padding: 0px;
}

ul.list-number-notes li {
	margin-left: 18px;
	font-size: 15px;
	line-height: 1.8;
}

ul.list-blue {
	padding: 0;
	margin: 0;
	list-style-type: none;
	margin-bottom: 20px;

	ul {
		padding: 0;
		margin: 0;
		list-style-type: none;
		margin-bottom: 20px;

		li {
			padding-left: 20px;
			position: relative;
			font-size: 15px;
			padding-bottom: 4px;
			color: #000;
		}
	}
}

ul.list-blue li {
	padding-left: 20px;
	position: relative;
	font-size: 15px;
	padding-bottom: 4px;

}

ul.list-blue li:before {
	left: 0;
	position: absolute;
	content: '';
	top: 13px;
	width: 8px;
	border-bottom: 2px solid #0083C2
}

ul.list-red li:before {
    border-bottom: 2px solid #DC0D1D;
}

ul.list-green li:before {
    border-bottom: 2px solid #13A538;
}

ul.list-blue-text {
	padding: 0;
	margin: 0;
	list-style-type: none;
	margin-bottom: 20px
}

ul.list-blue-text li {
	padding-left: 20px;
	position: relative;
	font-size: 15px;
	padding-bottom: 4px;
	color: #0083C1;
}

ul.list-blue-text li:before {
	left: 0;
	position: absolute;
	content: '';
	top: 13px;
	width: 8px;
	border-bottom: 2px solid #0083C2
}


ul.list-white {
	padding: 0;
	margin: 0;
	list-style-type: none;
	margin-bottom: 20px
}

ul.list-white li {
	padding-left: 20px;
	position: relative;
	font-size: 15px;
	padding-bottom: 4px;
}

ul.list-white li:before {
	left: 0;
	position: absolute;
	content: '';
	top: 13px;
	width: 8px;
	border-bottom: 2px solid #fff
}

.text-left {
	text-align: left;
}

ul.dash-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.f-weight {
	font-weight: 500
}

ul.dash-list li {
	position: relative;
	line-height: 1.4;
	padding-left: 20px;
}

ul.dash-list li:before {
	content: '';
	position: absolute;
	width: 8px;
	height: 1px;
	border-bottom: 1px solid #000000;
	left: 4px;
	top: 11px;
}

.txt-heading-med {
	font-size: 20px;
	color: #58595A;
}

.bg-greyish {
	background: #DFE8EA;
}

.intro li {
	font-size: 21px !important
}

.fin-bkr{
	background: #DEEDFA!important;
}

/* FINANCIAL TABLE STYLES*/

.fin-tbl tr:hover {
	background: #DCE6EA !important;
	color: #000;
}

/*TABLE ON HOVER BACKGROUND COLOUR AND TEXT COLOUR*/
tr.no-hover:hover {
	color: #DFE8EA !important;
}

/*TABLE ON HOVER HIGHLIGHTED COLOUMN TEXT COLOUR TO REMAIN STAT*/
.fin-tbl {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0px;
}

/*THE COMPLETE TABLE TO BE GIVEN 100% WIDTH; O MARGINS AND O PADDING*/
.fin-tbl tr td {
	line-height: 1.4;
	padding: 3px 8px 3px 3px;
}

/*EACH CELL IN TABLE TO HAVE A PADDING OF 3 AROUND CONTENT*/
.fin-tbl th {
    color: #006198;
    padding: 3px 8px 3px 3px;
    background: #BEDBF3;
    font-weight: normal;
    font-family: 'Telkom123 Light', 'Calibri', Arial, Helvetica, sans-serif;
	text-align: revert-layer;
}

.fin-tbl .switch-dblue{
	color: #006198!important;
}

/*THE HIGHLIGHTED COLUMN BACKGROUND COLOUR; TEXT COLOUR; PADDING AND A FONT WEIGHT IF NEEDED*/
strong,
b {
	font-family: Telkom123 Bold
}



/* .switch-dblue {
	color: #007BC7 !important
} */

.switch-blue {
	color: #0083C1 !important
}

.switch-slate-blue {
	color: #4663A9 !important
}


.switch-black {
	color: #000 !important
}

.switch-drk-grey {
	color: #3B3B3A;
}



.fin-tbl tr:nth-child(1) td.switch-blue {
	font-family: 'Telkom123 Regular', sans-serif;
}

.fin-tbl tr:nth-child(2) td.switch-blue {
	font-family: 'Telkom123 Regular', sans-serif;
}

.fin-tbl .finheader {
	background: #B9CED4;
	color: #007BBE !important;
	font-weight: bold;
	font-family: Telkom123 Bold;
}

.fin-tbl .finheaderbod {
	background: #B9CED4;
	color: #007BBE !important;
	font-weight: bold;
	font-family: Telkom123 Bold;
	border-bottom: 1px solid #0083C2;
}

.finheadergrey {
	background: #DFE8EA;
	color: #005B93 !important;
	font-weight: 300;
	font-family: Telkom123 Regular;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #939598
}

.finheadergreynb {
	background: #DFE8EA;
	color: #005B93 !important;
	font-weight: 300;
	font-family: Telkom123 Regular;
	border-bottom: 1px solid #939598
}

.finheader2 {
	color: #0083C2 !important;
	font-weight: bold !important;
	font-family: Telkom123 Bold;
	border-bottom: 1px solid #0083C2
}

.finheader3 {
	color: #0083C2 !important;
	font-weight: bold !important;
	font-family: Telkom123 Bold;
	background: #E9F4FD;
	border-top: 1px solid #0083C2;
}

.finheader4 {
	color: #005B93 !important;
	font-weight: bold !important;
	font-family: Telkom123 Bold;
	border-bottom: 1px solid #fff;
	text-align: center !important
}

.finheader-nb {
	background: #0083C2 !important;
	color: #fff !important;
	font-family: Telkom123 Bold;
}



.switch-bg-lblue {
	background: #E9F4FD !important;
}

/*blue lines*/
.finthin {
	border-bottom: 1px solid #0083C2
}

.fintop {
	border-top: 1px solid #0083C2
}

.finleft {
	border-left: 1px solid #0083C2;
}

.finright {
	border-right: 1px solid #0083C2;
}

.fintopleft {
	border-top: 1px solid #0083C2;
	border-left: 1px solid #0083C2;
}

.fintopright {
	border-top: 1px solid #0083C2;
	border-right: 1px solid #0083C2;
}

.finbotleft {
	border-bottom: 1px solid #0083C2;
	border-left: 1px solid #0083C2;
}

.finbotright {
	border-bottom: 1px solid #0083C2;
	border-right: 1px solid #0083C2;
}

.finthicktop {
	border-top: 3px solid #0083C2
}

.finthicker {
	border-bottom: 5px solid #0083C2;
}

.finthick-2 {
	border-bottom: 2px solid #005892;
}

.finthickertop {
	border-bottom: 5px solid #0083C2;
}


.finrow {
	border-top: 1px solid #0083C2;
	border-bottom: 1px solid #0083C2;
}

.finthickrow {
	border-top: 3px solid #0083C2;
	border-bottom: 3px solid #0083C2;
}

.finrowleft {
	border-left: 1px solid #0083C2;
	border-top: 1px solid #0083C2;
	border-bottom: 1px solid #0083C2;
}

.finrowright {
	border-right: 1px solid #0083C2;
	border-top: 1px solid #0083C2;
	border-bottom: 1px solid #0083C2;
}

/*blue lines end*/



/*grey lines*/
.finthingrey {
	border-bottom: 1px solid #939598
}

.fintopgrey {
	border-top: 1px solid #939598
}

.finleftgrey {
	border-left: 1px solid #939598;
}

.finrightgrey {
	border-right: 1px solid #939598;
}

.fintopleftgrey {
	border-top: 1px solid #939598;
	border-left: 1px solid #939598;
}

.fintoprightgrey {
	border-top: 1px solid #939598;
	border-right: 1px solid #939598;
}

.finbotleftgrey {
	border-bottom: 1px solid #939598;
	border-left: 1px solid #939598;
}

.finbotrightgrey {
	border-bottom: 1px solid #939598;
	border-right: 1px solid #939598;
}

.finrowgrey {
	border-top: 1px solid #939598;
	border-bottom: 1px solid #939598;
}

.finthickrowgrey {
	border-top: 3px solid #939598;
	border-bottom: 3px solid #939598;
}





.finthickerred {
	border-bottom: 4px solid #E41E2C;
}

.finthickertop {
	border-top: 4px solid #0083C2;
}

.finthintopbot {
	border-bottom: 1px solid #0083C2;
	border-top: 1px solid #0083C2
}

.finthickergrey {
	border-bottom: 3px solid #939598;
}

.finthindargrey {
	border-bottom: 1px solid #636466
}

.finthinwhite {
	border-bottom: 1px solid #fff
}

.finrightwhite {
	border-right: 1px solid #fff
}


.fingreytext {
	color: #6D6E71
}

.fingreytextthin {
	color: #6D6E71;
	border-bottom: 1px solid #939598
}

.fingreytextthick {
	color: #6D6E71;
	border-bottom: 2px solid #939598
}

.fincaption {
	font-size: 11px;
	font-style: italic;
	padding-top: 0;
	padding-bottom: 0;
}

.contentfin {
	background-color: #FFF;
	padding: 20px 20px 20px 20px;
	border: 1px solid #184069;
}

.captionfin {
	font-size: 11px;
}

.caption {
	font-size: 11px !important;
	font-style: italic;
	padding-bottom: 0
}

 .largernum:before {
            padding: 0px 11px 13px 8px
        }

		.remove-bottom-bdr{border-bottom: 0 !important;}
.glosary-box-holder-box
{
	width: 100%;
	text-align: left;
	margin-bottom: 20px;
}
.glosary-box-holder-box-fixed
{
	position: fixed;
    top: 40px;
    background: #fff;
    padding-top: 30px;
	 padding-bottom: 30px;
}
.glosary-box-name
{
	display: inline-block;
	padding: 10px;
	color: #fff;
	background: #0083C1 ;margin-right: 3px;margin-left: 3px;
	    transition: all .2s linear;
	font-size: 20px;
    font-weight: 400;
    min-width: 29px;
    text-align: center;
	margin-bottom: 15px;
}
.glosary-mainbox 
{
	margin: 5px;
	margin-bottom: 70px;float: left;
    width: 100%;
}
.glosary-box-name:hover
{
	background: #006198;
}
.glosary-box-name.active
{
	background: #006198;
}
.glosary-box-name-holder
{
	float: left;
	width: 100%;
	display: flex;
}
.glosary-box-name-text
{
	
	border-bottom: 1px solid #0083C1;
	width: 250px;
	float: left;
	padding: 10px;
	color: #0083C1;
	font-weight:600;
	flex: 1;
	background: #ECF5FB;
}
.glosary-box-wraper
{
	display: none;
}
.glosary-box-wraper-show
{
	display: block;
}
.glosary-box-name-decrip
{
	float: left;
	width: 90%;
	 width: -moz-calc(100% - 250px);
    width: -webkit-calc(100% - 250px);
    width: calc(100% - 250px);
	
	padding: 10px;
	border-bottom: 1px solid #1984C2;
}
.glosary-box-wraper-show
{
	border-bottom: 1px solid #1984C2;
	float: left;
    width: 100%;
}

.glosary-mainbox-show .glosary-box-name-holder
{
	border-top: 0px solid #B2B2B2;
}	
.glosary-mainbox-show .glosary-box-wraper
{
	display: block;
}

        ol {
            counter-reset: item;
            margin-bottom: 30px;
            padding-left: 55px;
        }

        ol>li {
            display: block;
            color: #0083C1;
            padding-left: 0px;
            line-height: 2.5;

            position: relative;
            font-weight: bold;
            margin-bottom: 20px;
        }

        ol>li:before {
            content: counters(item, ".") " ";
            counter-increment: item;
            width: 38px;
            height: 38px;
            border: 1px solid #006197;
            position: absolute;
            top: -1px;
            left: -50px;
            padding: 0px 3px 13px 13px;
        }

        ol>li a {
            color: #0083C1 !important;

        }

        ol>li>ol>li a {
            color: #0083C1 !important;
        }

     

        ol>li>ol>li {
            display: block;
            float: none;
            font-weight: 500;
            margin-bottom: 5px;
        }

        ol>li>ol>li:before {
            padding: 0px 3px 13px 5px;
        }

        ol>li>ol.largenum>li:before {
            padding: 0px 3px 13px 1px;
        }

        ol>li:hover:before {
            background: #006197;
            color: #fff;
            animation: fadein 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
        }



        .inc-pad a {
            padding-left: 50px;
            position: relative;
        }

        .inc-pad::before {
            left: 0px;
            z-index: 0;
        }

        .push-back-inline {
            padding-left: 0;
        }
        .mar-left{ margin-left: -50px;}

.focusrow {
	border-top: 1px solid #0083C2
}

.focus1 {
	background: #DFE8EA;
	padding: 10px;
	height: 100%;
	color: #0083C1;
	font-weight: bold;
	border-bottom: 1px solid #939598
}

.focus2 {
	padding: 10px;
	height: 100%;
	border-bottom: 1px solid #939598
}


/*---RESET STYLES----*/

.no-borderB {
	border-bottom-width: 0 !important
}

.no-borderR {
	border-right-width: 0 !important
}

.no-borderT {
	border-top-width: 0 !important
}

.no-borderL {
	border-left-width: 0 !important
}

.obj-c {
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center !important;
}

.rgt {
	float: right;
	text-align: right
}


.no-margin {
	margin: 0 !important;
}

.no-marginT {
	margin-top: 0 !important;
}

.no-marginB {
	margin-bottom: 0 !important;
}

.circle-block {
	position: relative;
	border-radius: 50%;
	text-align: center;
	font-size: 12px;
	display: inline-block;
}

.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-10L {
	padding-left: 10px !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-10 {
	padding: 10px !important;
}

.padding-10T {
	padding-top: 10px !important;
}

.padding-10L {
	padding-left: 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;
}

.padding-50R {
	padding-right: 50px !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-70T {
	margin-top: 70px !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-50B {
	margin-bottom: 50px !important;
}

.margin-60B {
	margin-bottom: 60px !important;
}

.margin-70B {
	margin-bottom: 70px !important;
}

.margin-75B {
	margin-bottom: 75px !important;
}

.margin-75T {
	margin-top: 75px !important;
}

.margin-75R {
	margin-right: 75px !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;
}


.margin-75L {
	padding-left: 75px !important;
}

/*=SWITCH COLORS
---------------*/
.color-block {
	height: 200px;
	width: 100%;
	position: relative
}

.color-block span {
	width: 100%;
	position: absolute;
	top: 50%;
	text-align: center;
	transform: translateY(-50%);
	display: block;
}




.switch-bg-lblue {
	background: #5BC2E7 !important
}

.switch-bg-lblue-1 {
	background: #44C7EE !important
}

.switch-bg-lblue-2 {
	background: #5BC2E7 !important
}

.switch-bg-dblue {
	background: #004593 !important
}

.switch-bg-p-blue {
	background: #D1DEE3 !important
}

.switch-bg-aq-blue {
	background: #95D3F3 !important
}

.switch-bg-pblue-1 {
	background: #C7DADF !important
}


.switch-bg-navy {
	background: #084C77 !important
}

.switch-bg-lgrey {
	background: #E9EEF1 !important
}
.switch-bg-lgrey2 {
	background: #E3E6E5 !important
}

.switch-bg-dgrey {
	background: #5B6770 !important
}
.switch-bg-dgrey1 {
	background: #A2ABAD !important
}


.switch-bg-grey {
	background: #D0D3D4 !important
}
.switch-bg-grey1 {
	background: #BAC9D0 !important
}
.switch-bg-grey2 {
	background: #DBE4E7!important
}
.switch-bg-grey3 {
	background: #E2EBEE !important
}



.switch-bg-blue {
	background: #0083C2 !important
}

.switch-bg-blueshade {
	background: #A7D6F5 !important
}
.switch-bg-blueshade2 {
	background: #E0ECF7 !important
}
.switch-bg-blueshade3 {
	background: #AFD5EF !important
}
.switch-bg-blueshade4 {
	background: #D2E4F3 !important
}
.switch-bg-blueshade5 {
	background: #D6EBFB!important
}

.switch-bg-aq-grey {
	background: #DCE6EA !important
}

.switch-bg-aq {
	background: #05C3DE !important
}

.switch-bg-green {
	background: #00A72C !important
}

.switch-bg-yellow {
	background: #FDBA29 !important
}

.switch-bg-red {
	background: #E31E2A !important
}

.switch-bg-orange {
	background: #EC6E24 !important
}

.switch-bg-white {
	background: #FFF !important
}

.switch-bg-graph-grey {
	background: #E2E6E6 !important
}

.switch-d-grey-1 {
	color: #9FAAB2 !important
}

.switch-lblue-2 {
	color: #0083C2 !important
}

.switch-aqua {
	color: #04C3DE !important;
}

.switch-lblue {
	color: #00ACE9 !important
}

.switch-lblue-1 {
	color: #5AC1E7 !important
}

.switch-dblue {
	color: #0053A6 !important
}

.switch-navy {
	color: #004876 !important
}

.switch-lgrey {
	color: #B6B6B6 !important
}

.switch-dgrey {
	color: #5B6770 !important
}

.switch-dgrey-1 {
	color: #9FAAB2 !important
}

.switch-grey {
	color: #6D6D6D !important
}

.switch-dgrey {
	color: #484848 !important
}


.switch-aq-blue {
	color: #95D3F3 !important
}



.switch-aq {
	color: #28C0DA !important
}

.switch-green {
	color: #00A72C !important
}

.switch-olivegreen {
	color: #2C5223 !important
}


.switch-yellow {
	color: #FDBA29 !important
}

.switch-red {
	color: #E31E2A !important
}

.switch-orange {
	color: #EC6E24 !important
}

.switch-white {
	color: #FFF !important
}

.switch-black {
	color: #000 !important
}

.scrollable {
	position: relative;
	clear: both;
}




.snap-block {
	background: url(../images/snap-img.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 90vh;
	overflow-x: hidden;
}

.section-block {
	background: rgba(25, 94, 172, 0.9);
	padding: 20px;
	padding-left: 85px;
	height: 100%;

}

.section-heading {
	display: flex;
	padding-top: 20px;
	padding-bottom: 25px;
	margin-bottom: 20px;
	margin-top: 15px;
	justify-content: space-between;
	gap: 30px;
}

.section-heading p {
	color: #fff;
	font-size: 40px;
	font-weight: 500;
	margin-bottom: 0;
	font-family: 'Telkom123 Bold', 'Calibri', Arial, Helvetica, sans-serif;
	line-height: 1.2;
}

.section-intro {
	font-size: 18px;
	color: #fff;

}



.section-heading p:nth-child(2) {
	font-family: 'Telkom123 Light', 'Calibri', Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-weight: 500;
}

.section-block2 {
	background: rgba(54, 103, 177, 0.8);
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.leader-bkr {
	background: url(../images/leader-bkr.jpg);
		display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section4-bkr{
background: url(../images/section4-bkr.png)!important;
}

.leadership-block {
	background: rgba(0, 123, 190, 0.7);
	padding: 20px;
	position: relative;
	padding-bottom: 80px;
	min-height: 225px;
}

.leadership-block::before {
	background: rgba(26, 156, 209, 0.9);
	position: absolute;
	content: '';
	left: -50%;
	width: 50%;
	height: 100%;
	top: 0;

}

.lead-q{
	font-weight: 500;
	    font-family: 'Telkom123 Bold';
	color: #004493;
	font-size: 17px;
}
.lead-q i{
font-size: 24px;
font-style: normal;
padding: 0 5px;
border-left: 1px solid #004493;
border-right: 1px solid #004493;
}
i.c-answer{
	font-weight: 500;
	    font-family: 'Telkom123 Bold';
	font-size: 24px;
font-style: normal;
padding: 0 5px;
color: #5AC1E7!important;
border-left: 1px solid #5AC1E7;
border-right: 1px solid #5AC1E7;
}

.chair-name{
	padding: 20px;
	text-align: right;
	display: inline-block;
	color: #0079BD;
	border-bottom: 1px solid #0079BD;
	border-right: 1px solid #0079BD;
	position: relative;
	margin: 30px 20px;
	    margin-right: -100px;
}
.chair-name::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
border-top: 1px solid #0079BD;
border-left: 1px solid #0079BD;
right: -20px;
bottom: -20px;
}


.snap-nobg {
	/* margin-left: 60px; */
	font-size: 15px;
	color: #004E9D;
	font-weight: 600;
	padding-left: 15px;
}

.snap-nobg i {
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	font-family: 'Telkom123 Bold', 'Calibri', Arial, Helvetica, sans-serif;
}

.snap-lbluebg,
.snap-bluebg {
	/* margin-left: 60px; */
	position: relative;
	padding: 15px;

	color: #fff;
	font-size: 15px;
	background: #2994CB;
	font-weight: 600;
	margin-bottom: 20px;
}

.snap-lbluebg {
	background: #2BBDEA !important;

}


.switch-shiny-blue {
	color: #0054A6 !important
}
.switch-bg-shiny-blue {
	background: #0054A6 !important
}

.snap-lbluebg img,
.snap-bluebg img {
	position: absolute;
	left: -60px;
	top: 10px;

}

.graph-heading2 {
	color: #fff;
}



.download-section-Telkom>img {
	margin-top: 20px;
	cursor: pointer;
}

.button-download {
	color: #007BBE;
	font-size: 16px;
	text-align: center;
	position: relative;
	display: inline-block;
	font-weight: 500;
	transition: all 0.3s ease-out;
	cursor: pointer;
	margin-right: -8px;
	margin-top: 25px;
}

.button-download img {}

.button-download strong {
	display: block;
	margin: 22px 0;
}

.download-section-Telkom:hover .button-download img {
	cursor: pointer;
	animation: bounce 3s ease-in-out;
}

.download-section-Telkom:hover .button-download {
	color: #004f9e;
	transition: all 0.3s ease-out;
}

.download-section-Telkom:hover .button-download span {
	font-weight: bold
}

/*Telkom Snaphot*/

.snapshot-purpose-circle {
	width: 25%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	left: 13%;
	margin-bottom: 15px;
	text-align: center;
}

.snapshot-purpose-circle-two {
	width: 25%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	left: 28%;
	margin-bottom: 15px;
	text-align: center;
}

.snapshot-purpose-circle {
	width: 35%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	left: 18%;
	margin-bottom: 15px;
	text-align: center;
}

.snapshot-purpose-circle-two {
	width: 35%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	left: 23%;
	margin-bottom: 15px;
	text-align: center;
}

.snapshot-purpose-circle-line:before {
	content: '';
	width: 11px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #0E2C6D;
	position: absolute;
	left: 50%;
	bottom: -46%;
	z-index: 1;
	transform: translateX(-50%);
}

.snapshot-purpose-circle-line:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 82px;
	background: #0E2C6D;
	left: 50%;
	top: 80%;
	z-index: 1;
	transform: translateX(-50%)
}

.snapshot-purpose-circ-line:after {
	content: '';
	width: 11px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #0E2C6D;
	position: absolute;
	left: 50%;
	bottom: -69vh;
	z-index: 1;
	transform: translateX(-50%);
}

.snapshot-purpose-circ-line:before {
	content: '';
	position: absolute;
	width: 1px;
	height: 680px;
	background: #0E2C6D;
	left: 50%;
	top: 80%;
	z-index: 1;
	transform: translateX(-50%);
}

.our-vision-content:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 60px;
	background: #0E2C6D;
	left: 41%;
	top: -22%;
	z-index: 1;
	transform: translateX(-50%);
}

.our-vision-content:before {
	content: '';
	width: 11px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #0E2C6D;
	position: absolute;
	left: 40.8%;
	top: -6%;
	z-index: 1;
	transform: translateX(-50%);
}

.snapshot-purpose-circle-two span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	margin: 0 auto;
	width: 80%;
}

.snapshot-purpose-circle span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	margin: 0 auto;
	width: 80%;
}

.snapshot-seam-circle span {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translate(-50%, -50%);
	width: 80%;
}

.snapshot-seam-circle-two span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	width: 70%;
}

.snapshot-seam-circle {
	width: 69%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	text-align: center;
	position: relative;
}

.snapshot-seam-circle-two {
	width: 80%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	text-align: center;
	position: relative;
	margin-bottom: 25px;
}

.border-bottom-ov {
	border-bottom: 1px solid #49C7ED;
	text-align: center;
	padding-bottom: 5px;
	padding-top: -13px;
}

.our-vision-content {
	margin-top: 35px;
	position: relative
}

.our-values-and-culture-circ {
	width: 84%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	left: 18%;
	margin-bottom: 15px;
	text-align: center;
}

.our-values-and-culture-circ span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
}


.dot-our-values-and-culture {
	width: 10px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #0E2C6D;
	position: absolute;
	left: 68.7%;
	bottom: -13%;
}

.alphabet-border-snapshot {
	border-bottom: 2px solid #49C7ED;
	margin-bottom: 10px;
}

.alphabet-one {
	font-size: 55px;
	color: #004F9D;
	left: -88px;
}

/*End of Telkom Snaphot*/




/*telkoms-business-units*/

.t-business-units section {
	border-bottom: 1px solid #0DB14B;
	border-right: 1px solid #0DB14B;
	height: 100%
}

.t-business-units .heading {
	color: #0DB14B;
	padding: 5px 15px 5px 15px;
	border-bottom: 1px solid #0DB14B;
	display: block;
	width: 100%;
	min-height: auto;
}

.t-business-units .content {
	padding: 0 15px 10px 15px;
}

.t-business-units .content ul li span {
	color: #0DB14B;
	font-weight: 500;
}

.t-business-units {
	background-image: linear-gradient(to bottom, #AAC4CB, #F6F9F9);
	margin-top: 45px;
}

.t-business-units .header .img-section {
	width: 215px;
	margin: 0 auto;
}

.t-business-units .header .img-section p {
	margin-left: 13px;
	margin-bottom: 4px;
	margin-top: 7px;
}

.t-business-units .header .img-section p strong {
	color: #0DB14B;
	font-weight: 500;
}

.t-business-units .header {
	position: relative;
}

.t-business-units .header::before {
	content: "";
	position: absolute;
	height: 335px;
	width: 100%;
	right: -40px;
	top: -45px;
	background-image: linear-gradient(to right, rgba(170, 195, 203, 0) 20%, rgba(170, 195, 203, 1));
}

.t-business-units .header .description {
	padding: 75px;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 20px;
}

.t-business-units .header .description p {
	color: #fff;
	font-weight: 600;
	margin-bottom: 25px;
	background-image: linear-gradient(to right, rgba(13, 177, 75, 1), rgba(13, 177, 75, 0) 90%);
	padding: 40px 10px 40px 30px;
	position: relative;
	z-index: 999;
}

.switch-linear-blue {
	background-image: linear-gradient(to right, #0083C2, rgba(13, 177, 75, 0) 90%) !important;
}

.description p a:link {
	color: fff !important;
	text-decoration: underline;
}

.description p a:link:hover {
	color: #0571C6 !important;
}

.t-business-units .description .link {
	margin-left: 30px;
}

.t-business-units .img-section-cont {
	position: relative;
}

.t-business-units .img-section-cont::before {
	content: "";
	position: absolute;
	height: 331px;
	width: 110%;
	left: -40px;
	top: -45px;
	background-image: linear-gradient(to right, rgba(13, 177, 75, 1), rgba(13, 177, 75, 0));
	z-index: 1;
}

.t-business-units .header .img-section img {
	position: relative;
	z-index: 1;
}

.bg-switch-grey {
	background: #EBEBEC;
	padding-top: 30px
}

.tel-ban-block1 {
	min-height: 200px;
	border-right: solid 10px #A8C5CD;
	position: relative
}

.tel-ban-block1 span {
	font-size: 80px;
	color: #0083C3;
	font-weight: bold;
	text-align: right;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%)
}

.t-business-units {
	position: relative;
	padding-bottom: 40px;
}

.t-business-units::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	left: -40px;
	bottom: 0;
	background-image: linear-gradient(to bottom, #AAC4CB, #F6F9F9);
}

.t-business-units::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	right: -40px;
	bottom: 0;
	background-image: linear-gradient(to bottom, #AAC4CB, #F6F9F9);
	z-index: -1;
}

.units-wrapper {
	width: calc(100% - 237px);
	margin: 0 auto;
}

.capital-wrapper {
	width: calc(100% - 154px);
	margin: 0 auto;
}

.product-cap-heading {
	padding: 30px 0 30px 85px;
}

.product-cap-heading h1 {
	color: #FFF;
	margin: 0;
	position: relative;
	font-size: 2em;
}

.product-cap-heading h1:before {
	position: absolute;
	content: "";
	width: 55px;
	height: 55px;
	left: -70px;
	top: 8px
}

.product-cap-heading h1:after {
	position: absolute;
	content: "";
	width: 250px;
	height: 150px;
	right: -48px;
	top: 0;
	z-index: 1;
	background-size: contain;
}

.capital-snapshot-gradient-bg {
	background: linear-gradient(to right, #FFF 12%, #CFDDE0 25%);
	padding: 30px 30px 30px 0;
}

.switch-green-intro {
	background: linear-gradient(to bottom, #037E19 80%, #FBFDFA);
	padding: 50px;
	border-top: 30px solid #2AB44F;
}

.switch-blue-intro {
	background: linear-gradient(to bottom, #006A9E 80%, #FBFCFD);
	padding: 50px;
	border-top: 30px solid #0087C4;
}

.switch-red-intro {
	background: linear-gradient(to bottom, #CC0809 80%, #FFFFFF);
	padding: 50px;
	border-top: 30px solid #E43030;
}

.switch-purple-intro {
	background: linear-gradient(to bottom, #020313 80%, #FFFFFF);
	padding: 50px;
	border-top: 30px solid #181C43;
}

.switch-orange-intro {
	background: linear-gradient(to bottom, #E93606 80%, #FFFFFF);
	padding: 50px;
	border-top: 30px solid #F17325;
}

.capital-intro {
	font-size: 18px;
	color: #FFF;
	font-weight: 600;
	text-align: left;
}

.key-focus-block {
	margin-left: 45px;
	position: relative;
	padding-top: 42px;
}

.focus-text {
	text-align: right;
	font-size: 16px;
}

ul.line-list-green {
	padding-left: 0;
	margin-top: 56px;
}

ul.line-list-lgreen {
	padding-left: 5px;
	margin-top: 50px;
	position: relative;
}

ul.line-list-lgreen:before {
	position: absolute;
	content: "";
	height: 100%;
	width: 1px;
	background: #0DB14B;
	right: -18px;
	top: 0
}

ul.line-list-lgreen li {
	border-bottom: 1px solid #82B441;
	list-style: none;
	color: #636466;
	padding-bottom: 5px;
	font-size: 15px;
}

ul.line-list-lgreen li span,
ul.line-list-green li span {
	font-weight: 600;
}

ul.line-list-green li {
	border-bottom: 1px solid #0DB14B;
	list-style: none;
	color: #636466;
	padding-bottom: 5px;
	font-size: 15px;
}

.switch-bg-lime {
	background: #82B441
}

.performance-snapshot-circle {
	width: 90%;
	aspect-ratio: 1/1;
	position: relative;
	border-radius: 50%;
}

.performance-snapshot-circle span {
	text-align: center;
	font-weight: 600;
	color: #FFF;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	font-size: 14px;
}

.performance-snapshot-circle-inv {
	background: none;
	border: 1px solid #82B441;
	float: right;
	clear: both;
	position: relative;
}

.performance-snapshot-circle-inv:before {
	position: absolute;
	content: "";
	height: 50px;
	width: 1px;
	background: #485865;
	left: 50%;
	bottom: -25px;
	transform: translateX(-50%);
}

.performance-snapshot-circle-inv:after {
	position: absolute;
	content: "";
	height: 5px;
	width: 5px;
	background: #485865;
	left: 50%;
	bottom: -25px;
	transform: translateX(-50%);
	border-radius: 50%;
}

.border-dgreen {
	border: 1px solid #0DB14B;
}

.switch-lgreen {
	color: #82B441 !important
}

h3 img {
	padding-right: 15px;
}

.key-focus-block:before {
	position: absolute;
	content: "";
	background: #22B24C;
	height: 80%;
	width: 1px;
	bottom: 0;
	left: -61px;
}

.new-w {
	width: 79%
}



h1.indent {
	margin-left: -40px
}

.t-business-units {
	margin-bottom: 55px;
}

.units-wrapper h3 {
	margin-left: -40px;
	padding-bottom: .5rem !important
}

.t-business-units .content .list-blue {
	margin-bottom: 0 !important;
}

.t-business-units .column1 .heading {
	padding-left: 0 !important
}

.t-business-units .column1 .content {
	padding-left: 0 !important
}

.units-consumer .header .description p {
	background-image: linear-gradient(to right, #0083C3, rgba(13, 177, 75, 0) 90%) !important;
}

.units-consumer .img-section-cont::before {
	background-image: linear-gradient(to right, #0083C3, rgba(13, 177, 75, 0)) !important;
}

.units-consumer section {
	border-bottom: 1px solid #0083C3 !important;
	border-right: 1px solid #0083C3 !important;
}

.units-consumer .heading {
	border-bottom: 1px solid #0083C3 !important;
}

.units-bcx .header .description p {
	background-image: linear-gradient(to right, #E41E2C, rgba(13, 177, 75, 0) 90%) !important;
}

.units-bcx .img-section-cont::before {
	background-image: linear-gradient(to right, #E41E2C, rgba(13, 177, 75, 0)) !important;
}

.units-bcx section {
	border-bottom: 1px solid #E41E2C !important;
	border-right: 1px solid #E41E2C !important;
}

.units-bcx .heading {
	border-bottom: 1px solid #E41E2C !important;
}


.units-swiftnet .header .description p {
	background-image: linear-gradient(to right, #0E2C6D, rgba(13, 177, 75, 0) 90%) !important;
}

.units-swiftnet .img-section-cont::before {
	background-image: linear-gradient(to right, #0E2C6D, rgba(13, 177, 75, 0)) !important;
}

.units-swiftnet section {
	border-bottom: 1px solid #0E2C6D !important;
	border-right: 1px solid #0E2C6D !important;
}

.units-swiftnet .heading {
	border-bottom: 1px solid #0E2C6D !important;
}


.units-gyro .header .description p {
	background-image: linear-gradient(to right, #F36F21, rgba(13, 177, 75, 0) 90%) !important;
}

.units-gyro .img-section-cont::before {
	background-image: linear-gradient(to right, #F36F21, rgba(13, 177, 75, 0)) !important;
}

.units-gyro section {
	border-bottom: 1px solid #F36F21 !important;
	border-right: 1px solid #F36F21 !important;
}

.units-gyro .heading {
	border-bottom: 1px solid #F36F21 !important;
}






/*end telkoms-business-units*/


/*Celebrating 30 years*/
.timeline-bg {
	min-height: 100vh;
	padding: 50px 0;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.year-block {
	background: rgb(169, 195, 203);
	background: -moz-linear-gradient(90deg, rgba(169, 195, 203, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
	background: -webkit-linear-gradient(90deg, rgba(169, 195, 203, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
	background: linear-gradient(90deg, rgba(169, 195, 203, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a9c3cb", endColorstr="#ffffff", GradientType=1);
	aspect-ratio: 1/.2;
	position: relative;
}

.year-block p,
.year-info p {
	width: 70%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 0px;
}

.year-info {
	aspect-ratio: 1/1;
	border-radius: 50%;
	width: 95%;
	position: relative;
	margin: 20px 0 60px 0px;
}


/** fixing circles on firefox*/

@-moz-document url-prefix() {
	.year-info {
		padding-top: 95%;
	}

	.year-block {
		padding-top: 20%
	}

	.snapshot-purpose-circle-two,
	.snapshot-purpose-circle {
		padding-top: 35%
	}

	.snapshot-purpose-circle-two span,
	.snapshot-purpose-circle span,
	.our-values-and-culture-circ span,
	.snapshot-seam-circle span,
	.snapshot-seam-circle-two span,
	.snapshot-performance-circlebg span,
	.snapshot-performance-circlesml span,
	ul.tabs li span,
	a.material-aspects-circle span,
	.eng-top-circle-stakeholder span,
	.eng-circle-stakeholder span,
	.proactive-activities-circle-risk span,
	.proactive-activities-circle-risk1 span {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 80% !important;
	}

	.our-values-and-culture-circ {
		padding-top: 84%
	}

	.snapshot-seam-circle {
		padding-top: 69%
	}

	.snapshot-seam-circle-two {
		padding-top: 84%
	}

	.snapshot-performance-circlebg {
		padding-top: 60%
	}

	.snapshot-performance-circlesml {
		padding-top: 85%
	}

	a.material-aspects-circle,
	.chair-crc,
	.performance-snapshot-circle.switch-bg-white.w-100 {
		padding-top: 100% !important
	}

	ul.tabs li {
		padding-top: 16% !important
	}

	.number2,
	.number3,
	.number4,
	.number5,
	.number-one1,
	.number1,
	.number-one {
		height: 40px
	}

	.eng-circle-stakeholder,
	.eng-top-circle-stakeholder {
		height: 170px
	}

	.proactive-activities-circle-risk {
		height: 150px
	}

	.proactive-activities-circle-risk2 {
		height: 95px
	}

	.performance-snapshot-circle {
		padding-top: 90%
	}

	ul.gyro-num-circle li {
		padding-top: 9% !important
	}

	.performance-snapshot-circle.switch-bg-white,
	.tab-switch {
		padding-top: 40%
	}

	.caption .legend-number-key {
		height: 20px
	}

	.legend-number-key {
		height: 25px
	}

	.committee-darkblue-circle,
	.committee-blue-circle,
	.committee-taques-circle,
	.committee-lightblue-circle,
	.committee-grey-circle {
		height: 130px;
	}

	.capitals-circle {
		padding-top: 40%
	}
}

/* end circles on firefox */


.year-block+.year-info {
	margin: 60px 0 20px 0;
}

#year-1991 .year-info {
	background-color: #96D1F2;
}

#year-1991 .year-block {
	background: rgb(150, 209, 242);
	background: -moz-linear-gradient(90deg, rgba(150, 209, 242, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
	background: -webkit-linear-gradient(90deg, rgba(150, 209, 242, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
	background: linear-gradient(90deg, rgba(150, 209, 242, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#96d1f2", endColorstr="#ffffff", GradientType=1);
}

#year-2001 .year-info {
	background-color: #49C7ED;
}

#year-2001 .year-block {
	background: rgb(73, 199, 237);
	background: linear-gradient(90deg, rgba(73, 199, 237, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}


#year-2002 .year-info {
	background-color: #1FC0DB;
}

#year-2002 .year-block {
	background: rgb(31, 192, 219);
	background: linear-gradient(90deg, rgba(31, 192, 219, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2003 .year-info {
	background-color: #00B5EF;
}

#year-2003 .year-block {
	background: rgb(0, 181, 239);
	background: linear-gradient(90deg, rgba(0, 181, 239, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2009 .year-info {
	background-color: #008BC6;
}

#year-2009 .year-block {
	background: rgb(0, 139, 198);
	background: linear-gradient(90deg, rgba(0, 139, 198, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2010 .year-info {
	background-color: #0083C2;
}

#year-2010 .year-block {
	background: rgb(0, 131, 194);
	background: linear-gradient(90deg, rgba(0, 131, 194, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2012 .year-info {
	background-color: #004F9D;
}

#year-2012 .year-block {
	background: #004F9D;
}

#year-2013 .year-info {
	background-color: #004F9D;
}

#year-2013 .year-block {
	background: #004F9D;
}

#year-2015 .year-info {
	background-color: #003E6A;
}

#year-2015 .year-block {
	background: rgb(0, 62, 106);
	background: linear-gradient(90deg, rgba(0, 62, 106, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2016 .year-info {
	background-color: #0D2C6C;
}

#year-2016 .year-block {
	background: rgb(13, 44, 108);
	background: linear-gradient(90deg, rgba(13, 44, 108, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2017 .year-info {
	background-color: #485865;
}

#year-2017 .year-block {
	background: rgb(72, 88, 101);
	background: linear-gradient(90deg, rgba(72, 88, 101, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2020 .year-info {
	background-color: #0083C2;
}

#year-2020 .year-block {
	background: rgb(0, 131, 194);
	background: linear-gradient(90deg, rgba(0, 131, 194, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

#year-2022 .year-info {
	background-color: #49C7ED;
}

#year-2022 .year-block {
	background: rgb(73, 199, 237);
	background: linear-gradient(90deg, rgba(73, 199, 237, 1) 49%, rgba(255, 255, 255, 0.053658963585434205) 118%);
}

.year-info.w-0 {
	background-color: transparent !important;
}



.year-info.w-0 {
	opacity: 0;
}


.year-block+.year-info::before {
	bottom: calc(100% + -15px);
}


.year-block+.year-info::after {
	bottom: calc(100% + 63px);
}

.margin-center {
	position: relative;
	left: 6%;
}


/*End Celebrating 30 years*/


/*BOD*/
.member-container .row,
.member-container .row .col-lg-4,
.member-container .row .col-lg-8 {
	height: 100%
}

.member-container {
	padding-left: 10px;
	border: solid 2px;
	border-width: 0px 0px 0px 7px;
	margin-top: 20px;
	height: calc(100% - 20px);
}

.non-exec-container,
.new-non-exec-container {
	border-color: #004F9D;
}

.group-exec-container {
	border-color: #1FC0DB;
}

.member-name {
	margin: 20px 0px 0px 0px;
	font-weight: 800;
}

.member-name .member-age {
	display: block;
}

.non-exec-container .member-name,
.non-exec-container .member-info p i,
.new-non-exec-container .member-name,
.new-non-exec-container .member-info p i {
	color: #004F9D;
	font-style: normal;
}

.group-exec-container .member-name,
.group-exec-container .member-info p i {
	color: #1FC0DB;
	font-style: normal;
}

.member-info p {
	text-align: left;
	color: #6D6E70;
	margin-bottom: 10px
}

.member-info {
	height: 100%;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid grey;
}

.max-width-block-member {
	max-width: 165px;
}

.tab-switch {
	aspect-ratio: 1/.5;
	position: relative;
	cursor: pointer;
	transition: 0.6s ease-in-out;
}

.tab-switch p {
	font-size: 20px;
	color: #FFF;
	text-align: center;
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 800;
	margin-bottom: 0px;
}

.section-member-heading {
	margin-top: 40px;
	margin-bottom: 0px
}

#all-button.active {
	background-color: #005B94 !important
}

#non-exec-button.active {
	background-color: #004F9D !important;
}

#new-non-exec-button.active {
	background-color: #A9C4CB !important;
}

#group-exec-button.active {
	background-color: #1FC0DB !important;
}

/*end BOD*/


/* start form of proxy styles */
.desk {
	perspective: 1000;
	margin: 100px auto;
}

/*this is it!*/
.device {
	position: relative;
	width: 43%;
	aspect-ratio: 1/1.5;
	padding: 10px;
	border-radius: 15px;
	margin: 0 auto;
	background-color: #0a0a0a;
	box-shadow: -3px 3px 0 -1px #505050, -6px 7px 0 -2px #313131, 50px 80px 90px -12px rgba(0, 0, 0, 0.6), -50px 80px 200px -6px rgba(0, 0, 0, 0.3);
	transform-style: preserve-3d;
	transform: translateX(0px) translateY(-105px) translateZ(-13px) rotateX(45deg) rotateY(-2deg) rotateZ(-38deg);
	transform-origin-x: 50%;
	transform-origin-y: 50%;
	transition: all 0.3s ease-in-out;
}

.device:hover {
	transform: translateX(0px) translateY(50px) translateZ(-13px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	cursor: pointer;
}

.device:before,
.device:after {
	position: absolute;
	content: '';
	border-radius: inherit;
	top: 0;
	left: 0;
}



/*
This should be used to add the reflection gradient.
*/


.screen {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.screen a {
	display: block;
}

.screen img {
	opacity: 0.6;
	transition: 0.6s ease-in-out;
}

.device:hover .screen img {
	opacity: 1;
}

/* end form of proxy styles */


/*swiftnet*/
.top-bg {
	background-size: cover;
	background-repeat: no-repeat;
}

.consumer-white-gradient {
	background: linear-gradient(180deg, rgb(255 255 255 / 0) -3%, #fff 67%);
}


.consumer-dblue-gradient {
	background: linear-gradient(180deg, rgb(255 255 255 / 0) -3%, #E94F35 67%);
}

.blue-thick-lines {
	border-top: 4px solid #1D1E3F;
	border-bottom: 4px solid #1D1E3F;
	display: flex;
	justify-content: space-between;
	padding: 5px 35px;
	margin-top: 76px
}

.blue-thick-lines p {
	font-size: 20px;
	margin-bottom: 0;
	margin-top: 15px;
}

.blue-thick-lines img {

	margin-left: 5px;
}

@media screen and (max-width: 1230px) {
	.blue-thick-lines {
		padding: 5px 11px;
	}

}


.logo-telkom {
	padding: 90px 40px 90px 35px;
}

.consumer-dblue-gradient-content {
	border-bottom: 4px solid #fff;
	padding: 30px 38px 37px 38px;
}

.consumer-dblue-gradient-content-2 {
	padding: 30px 38px 217px 38px;
}

.consumer-dblue-gradient-content-2 p {
	text-align: left !important;
}

.consumer-dblue-gradient-content p {
	text-align: left !important;
}

.lblue-grad {
	background: linear-gradient(0deg, rgb(255 255 255 / 0) -3%, #fff 67%);
	width: 90%;
}

.lblue-grad-content {
	padding: 25px 40px 0px 40px;
}

.mobile-subscribers {
	display: flex;
	flex-direction: column;
	background-color: #4B9EC4;
}

.mobile-subscribers-huge-num {
	font-size: 30px;
	color: #84CFF5;
	margin-bottom: 18px;
	margin-left: 38px;
	font-family: 'Telkom123 bold', 'Calibri', Arial, Helvetica, sans-serif;
}


.open-serve-white-circle-holder {
	position: absolute;
	top: calc(50% - 60px);
}

.open-serve-white-circle-head {
	font-size: 37px;
	color: #fff;
	font-weight: 700;
}

.open-serve-white-circle-text {
	font-weight: bold;
	color: #fff;
	width: 200px;
	padding: 10px;
}

.open-serve-white-circle {
	width: 200px;
	height: 200px;
	border: 1px solid #fff;
	padding: 5px;
	border-radius: 50%;
	text-align: center;
	margin: auto;
	position: relative;
}

.open-serve-white-circle-none {
	border: 0px solid #000;
}

.open-serve-white-circle-holder-spacer {
	padding-top: 20px;
}

.accelerated-mobile-g {
	display: flex;
	justify-content: space-between;
}

.accelerated-mobile-img img {
	width: 17%;
}

.accelerated-mobile-img {
	text-align: end;
}


.coloum-bcx {
	display: flex;
	flex-direction: column;
	background-color: #FBD1C0;
	margin-top: 24px;
	padding: 25px;
	min-height: 230px;
}

.coloum-bcx-2 {
	display: flex;
	flex-direction: column;
	background-color: #FBD1C0;
	margin-top: 45px;
}

.bcx-huge-num {
	font-size: 30px;
	margin-bottom: 0;
	font-family: 'Telkom123 bold', 'Calibri', Arial, Helvetica, sans-serif;
}

.bcx-inner-holder {
	display: flex;
	justify-content: space-between;
}

.bcx-inner-left {
	display: flex;
	flex-direction: column;
}

.bcx-inner-left p {
	text-align: left !important;
}

.bg-lred-content-line {
	border-right: 1px solid #fff;
	padding: 10px 23px 18px 23px;
}

.bg-lred-content-line-white {
	border-right: 1px solid #fff;
}

.bcx-growth-arrow {
	position: relative;
}

.right-sec {
	padding-top: 5px;
}

.right-sec-2 {
	margin-top: 17px;
}

.right-sec p {
	margin-left: 6px;
}

.bg-lred-content-2 .big-brown-num-2 {
	font-size: 26px;
	font-weight: bold;
	font-family: 'Telkom123 Bold';
}

p.big-brown-num-2 {
	font-size: 26px;
	font-weight: bold;
	font-family: 'Telkom123 Bold';
}

.split-content {
	display: flex;
	justify-content: space-around;
	height: 67px;
	padding-top: 10px;
}

.bcx-growth-arrow span {
	position: absolute;
	top: -30px;
	left: 12px;
}

.bcx-growth-arrow img {
	margin-right: 36px;
	margin-left: -9px;
}

.orange-bg-img {
	background-repeat: no-repeat;
	height: 95vh;
	background-size: cover;
	background-position: bottom;
	margin-top: 37px;
	padding-top: 50px;
	height: 96%;
}

.bg-orange-content {
	font-size: 40px;
	font-weight: bold;
	font-family: 'Telkom123 Bold';
}

.bg-gradient-content p {
	text-align: left !important;
}

.bg-gradient-orange {
	padding: 35px 80px;
	background: linear-gradient(0deg, rgb(255 255 255 / 0) -3%, #E94F35 67%);
	height: 100%;
	width: 70%;
	margin: 0 auto;
}

/*//swiftnet*/












/*************/
.blue-intro {
	background: linear-gradient(to bottom, #00699E 80%, #FBFDFA);
	border-top: 30px solid #0086C4;
}

.telkom-head h1:after {
	background-size: contain;
}

.telkom-focus:before {
	background: #00699E;
}

.telkom-dblue-border {
	border: 1px solid #0083C2;
}

.telkom-lblue-border {
	border: 1px solid #00B5EF;
}

ul.line-list-blue li {
	border-bottom: 1px solid #0083C2;
}

ul.line-list-blue:before {
	background: #00699E;
}

ul.line-list-lblue li {
	border-bottom: 1px solid #00B5EF;
}

.red-intro {
	background: linear-gradient(to bottom, #CC0809 80%, #FBFDFA);
	border-top: 30px solid #E3262D;
}

.bcx-head h1:after {

	background-size: contain;
}

.bcx-red-border {
	border: 1px solid #CC0809;
}

.bcx-lred-border {
	border: 1px solid #E1525C;
}

.switch-lred {
	color: #E1525C !important;
}

ul.line-list-red li {
	border-bottom: 1px solid #E1525C
}

ul.list-red:before {
	background: #CC0809
}

.bcx-focus:before {
	background: #CC0809;
}

.swift-head h1:after {

	background-size: contain;
}

.swiftnet-focus:before {
	background: #F15B40;
	height: 76%;
}

/*.swiftnet-focus p{border-right: 1px solid #F15B40;}*/
ul.line-list-orange li {
	border-bottom: 1px solid #F15B40
}

ul.line-list-orange:before {
	background: #F15B40
}

.swiftnet-border {
	border: 1px solid #F15B40;
}

.swift-p-border {
	border: 1px solid #121740;
}

.purple-intro {
	background: linear-gradient(to bottom, #020313 80%, #FBFDFA);
	border-top: 30px solid #151942;
}

.graph-list {
	padding-left: 0;
	margin-top: 10px;
}

.graph-list li {
	list-style: none;
	float: left;
	width: 20.7%;
	border-right: 1px solid #FFF;
}

.show-par {
	display: none;
}

.bcx-focus div {
	padding-right: 10px
}

.pull-tbl {
	margin-left: -110px
}

.switch-brown {
	color: #692C21 !important
}

.border-brown {
	border: 1px solid #692C21
}

.gyro-head h1:after {

	background-size: contain;
}

ul.line-list-brown li {
	border-bottom: 1px solid #692C21
}

.orange-intro {
	background: linear-gradient(to bottom, #ED4A0F 80%, #FBFDFA);
	border-top: 30px solid #F37324;
}

ul.gyro-num-circle {
	margin-top: 100px;
}

ul.gyro-num-circle li {
	float: left;
	list-style-type: none;
	cursor: pointer;
	margin: 0 0 0 1px;
	padding: 12px 15px;
	text-decoration: none;
	color: #003068;
	width: 9%;
	margin-right: 50px;
	border-radius: 50%;
	aspect-ratio: 1/1;
	margin-bottom: 50px;
	text-align: center;
	font-weight: bold;
	position: relative;
}

ul.gyro-num-circle li:before {
	position: absolute;
	content: '';
	top: -23px;
	left: 50%;
	transform: translateX(-50%);
	border-right: 2px solid #5F757F;
	height: 32px;
}

.number-circle-gyro {
	border-radius: 50%;
	color: #fff;
	padding: 5px;
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	width: 65px;
	height: 65px;
	aspect-ratio: 1/1;
	font-size: 14px;
	padding: 17px;
}

.gyro-circle1 {
	border: 2px solid #692C21;
	color: #692C21;
}

.gyro-circle2 {
	border: 2px solid #F36F21;
	padding: 10px;
	color: #F36F21;
}

.gyro-circle3 {
	border: 2px solid #E49C83;
	color: #E49C83;
}

.gyro-circle4 {
	border: 2px solid #97AFB6;
	color: #97AFB6;
}

.switch-bg-brown {
	background: #692C21;
}

.switch-bg-lgrey {
	background: #97AFB6;
}

.switch-bg-lorange {
	background: #E49C83;
}

ul.gyro-num-circle li span {
	top: 50%;
	position: absolute;
	left: 50%;
	font-size: 14px;
	transform: translate(-50%, -50%);
}

.hide-br {
	display: none;
}

.principle-contain {
	position: relative;
	min-height: 50px;
}

.principle-contain p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.border-greyL {
	border-left: 1px solid #939598
}

.border-blueL {
	border-left: 1px solid #0083C2
}

.show-res {
	display: none
}

.key-focus-block div {
	position: absolute;
	bottom: 0;
	padding-right: 15px;
	text-align: right;
	border-right: 1px solid;
}

.list-no-style {
	padding-left: 0;
}

.list-no-style li {
	list-style: none;
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 1;
	font-size: 16px;
}

.show-br {
	display: none
}

.swiftnet-focus .list-no-style li {
	line-height: 1.2
}
/* transparency-and-accountability */
.blue-bod-wrapper {
		border: 3px solid #007BBE;
		position: relative;
		padding: 40px;
	}

	.blue-bod-wrapper::before {
		content: '';
		position: absolute;
		background-image: url('../images/icons/left-arrow.png');
		background-repeat: no-repeat;
		background-size: 33px;
		width: 30px;
		height: 30px;
		bottom: -12px;
		left: 30px;
		z-index: 1;
	}

	.dotted-bod {
		position: relative;
		border: 3px dotted #007BBE;
		padding: 40px;
	}

	.dotted-bod::before {
		content: '';
		position: absolute;
		background-image: url('../images/icons/short-left-arrow.svg');
		background-repeat: no-repeat;
		background-size: 39px;
		width: 30px;
		height: 30px;
		bottom: -12px;
		left: 47%;
		transform: translateX(0px);
	}

	.dotted-bod::after {
		content: '';
		position: absolute;
		background-image: url('../images/icons/short-right-arrow.svg');
		background-repeat: no-repeat;
		background-size: 39px;
		width: 30px;
		height: 30px;
		top: -21px;
		right: 48%;
		transform: translateX(0px);
	}

	.bg-universe-wrapper {
		position: relative;
		background-color: #CEE7FA;
		padding: 16px;
	}

	.bg-universe-wrapper::before {
		content: '';
		position: absolute;
		background-image: url('../images/icons/short-left-arrow.svg');
		background-repeat: no-repeat;
		background-size: 39px;
		width: 30px;
		height: 30px;
		bottom: -18px;
		right: -52px;
		transform: rotate(-90deg);
	}

	.abb-fc {
		border: 2px dotted #007BBE;
		border-radius: 50%;
		aspect-ratio: 1/1;
		width: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #007BBE;
		background-color: #fff;
		position: relative;
		top: 67px;
		left: 23px;
	}

	.abbreviations {
		position: absolute;
		left: -60px;
		top: 0;
	}

	.outcomes-texts-wrapper {
		position: relative;
		background-color: #fff;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		gap: 145px;
		bottom: -35px;
		margin-bottom: -70px;
	}


	.blue-bod-wrapper::after {
		content: '';
		position: absolute;
		background-image: url('../images/icons/right-arrow.png');
		background-repeat: no-repeat;
		background-size: 33px;
		width: 30px;
		height: 30px;
		bottom: -12px;
		right: 31px;
	}

	.bg-universe-wrapper::after {
		content: '';
		position: absolute;
		background-image: url('../images/icons/short-right-arrow.svg');
		background-repeat: no-repeat;
		background-size: 39px;
		width: 30px;
		height: 30px;
		bottom: 42%;
		left: -52px;
		transform: rotate(90deg);
	}

	.bod-top {
		border-top: 2px solid #007BBE;
	}

	.bot-bod {
		border-bottom: 1px solid #007BBE;
		padding-bottom: 20px;
	}

	.bod-l {
		border-left: 2px solid #007BBE;
		height: 100%;
	}

	.mt-35 {
		margin-top: 35px;
	}

	.section6-bkr {
		background: url(../images/section6-bkr.jpg) !important;
	}

	.abb-fc:nth-child(2) {
		top: 104px;
		left: 23px;
	}

	.abb-fc:nth-child(3) {
		top: 142px;
		left: 23px;
	}

	.abb-fc:nth-child(4) {
		top: 180px;
		left: 23px;
	}

	.abb-fc:nth-child(5) {
		top: 219px;
		left: 23px;
	}

	.abb-fc:nth-child(6) {
		top: 256px;
		left: 23px;
	}

	.bg-universe {
		background-color: #007BBE;
		padding: 10px 20px;
		text-align: center;
	}


	@media screen and (max-width: 991px) {
		.bod-l {
			border-left: none;
		}
	}

	@media screen and (max-width: 991px) {
		.bod-bot {
			border-bottom: 2px solid #007BBE;
		}
	}

	@media screen and (max-width: 991px) {
		img {
			max-width: 100%;
		}
	}

	@media screen and (max-width: 768px) {
		.outcomes-texts-wrapper {
			position: relative;
			flex-direction: column;
			gap: 20px;
			bottom: 0;
			left: 0;
			margin-bottom: -43px;
			min-width: unset;
		}
	}

	@media screen and (max-width: 768px) {
		.blue-bod-wrapper {
			padding: 16px;
		}
	}

	@media screen and (max-width: 991px) {
		.blue-bod-wrapper {
			margin-left: 20px;
			margin-bottom: 50px;
		}
	}

	@media screen and (max-width: 768px) {
		.dotted-bod {
			padding: 16px;
		}
	}

	@media screen and (max-width: 768px) {
		.abbreviations {
			left: -45px;
		}
	}

	@media screen and (max-width: 768px) {
		.ml-20 {
			margin-left: 20px;
		}
	}

	@media screen and (max-width: 768px) {
		.bg-universe-wrapper {
			&::before {
				right: -27px;
			}
		}
	}

	@media screen and (max-width: 768px) {
		.bg-universe-wrapper {
			&::after {
				left: -27px;
			}
		}
	}

	@media screen and (max-width: 768px) {
		.blue-bod-wrapper {
			&::before {
				left: 0px;
				z-index: 1;
			}
		}
	}

	@media screen and (max-width: 768px) {
		.blue-bod-wrapper {
			&::after {
				right: 0;
			}
		}
	}

/* End transparency-and-accountability */

/*************/




/*natural-capital*/


.climate-tbl section {

	border-bottom: 1px solid #939598;
	border-right: 1px solid #0083C2;
	height: 100%
}

.climate-tbl .remove-borderR {
	border-right: 0
}


.climate-tbl .content {
	padding: 15px 15px 0 15px;
}

.climate-tbl .heading {
	padding: 5px 15px 5px 15px;
	border-top: 1px solid #0083C2;
	border-bottom: 1px solid #0083C2;
	background: #DFE8EA;
	display: block;
	width: 100%;
	min-height: auto;
}

.img-links {
	float: left;
	width: auto;
	margin-right: 10px;
	margin-bottom: 5px;
}


.foot-print {
	float: right;
}


.margin-60T {
	margin-top: 60px;
}

.key-definitions-height {
	height: 100%
}

/**/




.emissions-img1 {
	display: block;
	width: 75%;
	margin: 0 auto;
	border: 1px solid #fff;
}

.emissions-img2 {
	display: block;
	width: 75%;
	margin: 0 auto;
	border: 1px solid #fff;
}

.water-consumption-cont img.water-img {
	float: unset;
	width: unset;
	margin: 0 0 15px 0 !important;
}

.waste-cont img.waste-img {
	float: right;
	margin: 0 0 0px 15px;
}

.enviro-goals {
	background: #fff;
}

.enviro-goals .heading {
	min-height: 60px;
}

.enviro-goals .disappear {
	display: none
}

.enviro-goals .content {
	padding: 15px 15px 15px 15px;
}

.emissions-projections {
	background: #CFDEE1;
	display: inline-block;
}

.task-force-bg {
	background: #DBF1FC;
	padding: 30px;
	padding-top: 20px;
}



.telkoms-impactImg {
	float: right
}





/*TABBED ACCORDION*/
ul.tabs {
	max-width: 80%;
	padding: 0 0 0 0;
	margin-bottom: 0 !important;
	font-size: 14px;
	margin: 0 auto;
	margin-top: 70px;
}

ul.tabs li {
	float: left;
	list-style-type: none;
	cursor: pointer;
	padding: 12px 15px;
	border: 2px solid #003068;
	text-decoration: none;
	color: #003068;
	width: 16%;
	margin-right: 4%;
	border-radius: 50%;
	aspect-ratio: 1/1;
	margin-bottom: 100px;
	text-align: center;
	font-weight: bold;
	position: relative
}

ul.tabs li:before {
	position: absolute;
	content: '';
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	border-right: 2px solid #A1ABB2;
	height: 30px
}

.number1 {
	background: #005B94;
	border-radius: 50%;
	color: #fff;
	padding: 5px;
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	aspect-ratio: 1/1;
}

.number2 {
	background: #0083C2;
	border-radius: 50%;
	color: #fff;
	padding: 5px;
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	aspect-ratio: 1/1;
}

.number3 {
	background: #00B5EF;
	border-radius: 50%;
	color: #fff;
	padding: 5px;
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	aspect-ratio: 1/1;
}

.number4 {
	background: #6D6E71;
	border-radius: 50%;
	color: #fff;
	padding: 5px;
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	aspect-ratio: 1/1;
}

.number5 {
	background: #003E6A;
	border-radius: 50%;
	color: #fff;
	padding: 5px;
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	aspect-ratio: 1/1;
}


.revenue-icons {
	position: absolute;
	content: '';
	bottom: -75px;
	left: 34%;
	width: 50px;
	height: 50px;
}

.padding-5 {
	padding: 5px !important;
}



/*ul.tabs li:first-of-type {margin:0}*/
ul.tabs li:hover {
	border: 2px solid #0083C2
}

ul.tabs li.active {
	padding-bottom: 12px;
	border-color: #0083C2;
	color: #003068;
	font-weight: bold;
	border-radius: 50%;
	text-align: center;
}

.tab-container {
	border-top: 0;
	margin-top: 0px;
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
	clear: both;
	width: 99.796334%;
	background: #D7E2E5;
	overflow: auto;
	margin-bottom: 30px;
}

.tab-drawer-heading {
	display: none;
}

.tab-drawer-content {
	padding: 1em;
	display: none;
}


ul.tabs li span {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 100%;
	font-size: 17px;
}






/*end natural-capital*/





/** key gov styles start*/

.legend-number-key {
	width: 25px;
	aspect-ratio: 1/1;
	background: #A9C4CB;
	position: relative;
	display: inline-block;
	margin: 0px 5px;
	border-radius: 50%;
	position: relative;
	bottom: -3px
}

.legend-number-key span {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold
}

.caption .legend-number-key {
	width: 20px;
	margin: 0px 0px;
}

.caption .legend-number-key span {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.bg-td-blue {
	background: #E1F4FD
}

.bg-h-blue {
	background: #DFE8EA
}

.committee-container {
	position: relative;
	cursor: pointer;
	margin-top: 40px;
}

.committee-container::after {
	content: "";
	display: block;
	position: absolute;
	height: 90%;
	bottom: 0px;
	width: 60%;
	z-index: 0;
	left: 0px;
	transition: 0.6s ease-in-out;
}

.committee-container:hover::after {
	width: 100%
}

.activeMember::after {
	width: 100%
}

.audit-committee:after {
	background: rgb(151, 209, 242);
	background: linear-gradient(180deg, rgba(151, 209, 242, 1) 22%, rgba(255, 255, 255, 0.053658963585434205) 56%);
}

.risk-committee:after {
	background: rgb(161, 171, 178);
	background: linear-gradient(180deg, rgba(161, 171, 178, 1) 22%, rgba(255, 255, 255, 0.053658963585434205) 56%);
}

.remuneration-committee:after {
	background: rgb(73, 89, 101);
	background: linear-gradient(180deg, rgba(73, 89, 101, 1) 22%, rgba(255, 255, 255, 0.053658963585434205) 56%);
}

.nominations-committee:after {
	background: rgb(0, 91, 148);
	background: linear-gradient(180deg, rgba(0, 91, 148, 1) 22%, rgba(255, 255, 255, 0.053658963585434205) 56%);
}

.investment-and-transactions-committee:after {
	background: rgb(0, 131, 194);
	background: linear-gradient(180deg, rgba(0, 131, 194, 1) 22%, rgba(255, 255, 255, 0.053658963585434205) 56%);
}


.social-and-ethics-committee:after {
	background: rgb(169, 195, 203);
	background: linear-gradient(180deg, rgba(169, 195, 203, 1) 22%, rgba(255, 255, 255, 0.053658963585434205) 56%);
}

.committee-container img {
	position: relative;
	z-index: 1;
}

.committee-member-name {
	position: relative;
	height: 100%;
}

.committee-member-name::after {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background: #A9C3CB;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0.5;
	z-index: 2;
}

.committee-member-name-content {
	position: relative;
	z-index: 3;
	height: 100%;
}

.committee-member-name-content .intro {
	position: absolute;
	top: 14%;
	left: 0;
	padding-left: 10px;
}

.committee-member-name-content .member-name {
	color: #FFF;
	font-weight: 800;
	position: absolute;
	bottom: 0%;
	display: block;
	left: 0;
	height: auto;
	background: rgba(143, 176, 188, 0.5);
	margin-bottom: 0px;
	width: 100%;
	padding: 5% 0px 0px 10px;
}



.committee-member-name-content .member-name::after {
	font-family: 'icomoon';
	content: "\e93a";
	color: #000;
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	transition: 0.6s ease-in-out;
}

.activeMember .committee-member-name-content .member-name::after {
	transform: translateY(-50%) rotate(-180deg);
	color: #FFF;
}

.list-blue li .list li::before {
	border-bottom-color: #000;
}

.committee-member-name-content .member-name .member-position {
	color: #000;
	font-weight: 500;
	display: block;
	margin-bottom: 10px;
}

.committee-information-block {
	display: none;
	background-color: rgba(143, 176, 188, 0.5);
	padding: 20px
}



/*end key gov styles */


/* Mr H */
.opacity-50 {
	opacity: .9 !important;
}

.floatLeftBlock {
	position: relative;
	left: -50px
}

.floatLeftBlock-list {
	list-style: none;
}

.floatLeftBlock-list li {
	font-family: 'Telkom123 Bold', 'Calibri', Arial, Helvetica, sans-serif;
	text-align: center;
	position: relative;
}

.floatLeftBlock-list li img {
	position: absolute;
	left: 50%;
	display: block;
}

.social-bg {

	background-size: cover;
	background-position: center;
}

.report-boundary-and-approval {
	background-size: cover;
	background-position: center;
}

.developing-skills {
	background-image: url(../images/page-bacgrounds/pg16.png);
	background-size: cover;
	background-position: center;
}



/*Managing our business with integrity */

.ethicsTbl {
	font-size: 15px
}

.border-blue-thin {
	border-top: 1px solid #0083C2
}

.ethicsTbl .title,
ethicsTbl .content {
	border-bottom: 1px solid #939598;
}

.ethicsTbl .title {
	color: #0083C2;
	background: #DFE8EA;
	padding: 10px;
	height: 100%;
}

.ethicsTbl .content {
	padding: 10px;
	height: 100%;
}

.ethicsTbl .border-1 {
	border-left: 7px solid #0083C2;
}

.ethicsTbl .border-2 {
	border-left: 7px solid #49C7ED;
}

.ethicsTbl .border-3 {
	border-left: 7px solid #00B5EF;
}

.ethicsTbl .border-4 {
	border-left: 7px solid #004F9D;
}

.ethicsTbl .border-5 {
	border-left: 7px solid #0D2C6C;
}

.ethicsTbl .border-6 {
	border-left: 7px solid #485865;
}

.ethicsTbl .border-7 {
	border-left: 7px solid #A1ABB2;
}


/*surveyTbl*/
.surveyTbl strong.header {
	padding: 20px;
	padding-left: 15px;
	border-top: 1px solid #0083C2;
	border-bottom: 1px solid #0083C2;
	color: #0083C2;
	display: block;
}

.surveyTbl .bglightblue {
	background: #DFE8EA;
}

.surveyTbl .body-header {
	display: none !important
}

.surveyTbl .content {
	height: 100%;
	padding: 20px;
	padding-left: 15px;
	padding-top: 10px;
}

.surveyTbl .column1 {
	border-bottom: 1px solid #939598;
	color: #0083C2;
	font-family: 'Telkom123 Bold';
}

.surveyTbl .column2 {
	border-left: 1px solid #0083C2;
	border-bottom: 1px solid #939598;
}

.surveyTbl .column3 {
	border-left: 1px solid #0083C2;
	border-bottom: 1px solid #939598;
	color: #939598;
	font-family: 'Telkom123 Bold';
}

.surveyTbl .column3 strong {
	display: block;
	margin-bottom: 26px;
}

.surveyTbl .column3 strong.add-mrg {
	margin-bottom: 51px;
}

/*surveyTbl*/
.ketSurveyTbl strong.header {
	color: #004F9D
}

.ketSurveyTbl .column1 {
	color: #004F9D
}

.ethical-culture {
	float: right;
	padding: 0 20px;
	height: 550px;
}

@media screen and (max-width: 991px) {
	.surveyTbl .top-header {
		display: none !important
	}

	.surveyTbl .body-header {
		display: block !important
	}

	.surveyTbl .header-white {
		background: #fff
	}

}

@media screen and (max-width: 1575px) {
	.surveyTbl strong.header {
		min-height: 90px;
	}

	.blue-thick-lines p {
		font-size: 16px;
		margin-bottom: 0;
		margin-top: 15px;
	}

	.blue-thick-lines {
		border-top: 4px solid #1D1E3F;
		border-bottom: 4px solid #1D1E3F;
		display: flex;
		justify-content: space-between;
		padding: 5px 10px;
		margin-top: 76px;
	}
}

@media screen and (max-width: 500px) {

	.ethical-culture {
		display: block;
		margin: 0 auto;
		height: unset;
		float: unset;
	}
}

/*end Managing our business with integrity */



/*  */


ul.section-links {

	list-style: none;
	border-left: 3px solid #fff;
	padding: 30px 0;
	padding-left: 30px;
}

ul.section-links li {
	margin-bottom: 15px;
	position: relative;
}

ul.section-links li a img {
	width: 150px;
	transition: all 0.5s ease-in-out;
}

ul.section-links li a:hover img {
	transform: scale(0.85);
}

ul.section-links li::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	left: -35px;
	top: 44px;
}

.comp-logo {
	width: 200px;
}





/*from style guide*/
.chair-crc {
	width: 100%;
	border-radius: 50%;
	aspect-ratio: 1/1;
	background: #96D1F2;
	position: relative;
}

.chair-crc:before {
	content: "";
	width: 2px;
	height: 55px;
	position: absolute;
	bottom: -35px;
	background: #004F9D;
	left: 50%;
	transform: translateX(-50%);
}

.chair-crc:after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #004F9D;
	position: absolute;
	bottom: -35px;
	left: 50%;
	transform: translateX(-50%);
}

.chair-crc-txt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #004F9C;
	text-align: center;
	width: 75%;
}

.chair-crc-txt p {
	text-align: center;
	font-family: 'Telkom123 Bold';
	font-size: 16px;
	color: #004F9C;
	margin-bottom: 20px;
	margin-top: 0;
}



.snapshot-purpose-circle-two {
	width: 35%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	left: 23%;
	margin-bottom: 15px;
	text-align: center;
}

.snapshot-seam-circle-two {
	width: 80%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	text-align: center;
	position: relative;
	margin-bottom: 25px;
}

.snapshot-seam-circle-two span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	width: 70%;
}

.our-vision-content {
	margin-top: 35px;
	position: relative;
}

.lrg-num {
	font-family: 'Telkom123 Bold', 'Calibri', Arial, Helvetica, sans-serif;
	font-size: 45px;
	color: #004F9D;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
}

.highlghts {
	padding: 10px 10px 20px 30px;
}


.switch-Lblue {
	color: #0083C2
}

.switch-skyblue {
	color: #00B5EF
}

.switch-brown {
	color: #6D6E71
}

.switch-Dblue {
	color: #003E6A
}

.border-Lblue {
	border: 2px solid #0083C2 !important
}

.border-skyblue {
	border: 2px solid #00B5EF !important
}

.border-brown {
	border: 2px solid #6D6E71 !important
}

.border-Dblue {
	border: 2px solid #003E6A !important
}

.analysis-grey-bg {
	background: linear-gradient(to bottom, #D7E2E5 0%, #B8CDD3 40%) !important;
	padding: 15px
}

.tbl-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #13A538;
}

.ceo-block2 {
	background: linear-gradient(0deg, rgba(247, 247, 247, 1) 16%, rgba(0, 127, 188, 1) 100%);
	padding: 50px;
	height: 100%;
}

.ceo-img2 {

	background-repeat: no-repeat;
	background-position: right;
	height: 100%;
	background-size: cover;
	position: relative
}

.cfo-img {

	background-repeat: no-repeat;
	background-position: right;
	height: 100%;
	background-size: cover;
	position: relative
}

.ceo-img2 img {
	position: absolute;
	bottom: 0;
	left: -130px
}


.number-one {
	background: #005B94;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	top: -33px;
	left: -4%;
	width: 35px;
	z-index: 9;
	display: block;
	aspect-ratio: 1/1;
}

.number-one1 {
	background: #005B94;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	top: -33px;
	left: -4%;
	width: 35px;
	z-index: 9;
	display: block;
	aspect-ratio: 1/1;
}

.number-three {
	background: #005B94;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	top: -33px;
	left: -2%;
	width: 35px;
	z-index: 9;
	display: block;
	aspect-ratio: 1/1;
}

.number-two {
	background: #005B94;
	border-radius: 50%;
	color: #fff;
	position: absolute;
	top: -17px;
	left: -2%;
	width: 35px;
	z-index: 9;
	display: block;
	aspect-ratio: 1/1;
}

.number-two span,
.number-one span,
.number-three span {
	font-size: 18px;
	padding: 12px;
}

.number-one1 span {
	font-size: 18px;
	padding: 4px;
}

.bg-Lblue {
	background: #0083C2 !important
}

.bg-skyblue {
	background: #00B5EF !important
}

.bg-brown {
	background: #6D6E71 !important
}

.bg-Dblue {
	background: #003E6A !important
}



/*consumer*/
.group-kpi-blocks .coloum-bcx-2 {
	height: 100%;
	position: relative;
	padding-top: 20px;
}

.group-kpi-blocks .coloum-bcx-2 .bcx-huge-num {
	font-size: 24px;
}

.coloum-bcx-2-altered {
	margin-top: 0 !important;
}

.group-kpi-blocks .coloum-bcx-2::before {
	content: "";
	position: absolute;
	height: 90%;
	width: 1px;
	right: 0;
	top: 5%;
	border-right: 1px solid #fff;
}


.group-kpi-blocks .column-bcx-new {
	height: 100%;
	position: relative;
	padding-top: 20px;
}

.group-kpi-blocks .column-bcx-new .bcx-huge-num {
	font-size: 24px;
}

.group-kpi-blocks .column-bcx-new::after {
	content: "";
	position: absolute;
	height: 90%;
	width: 1px;
	right: 0;
	top: 5%;
	border-right: 1px solid #fff;
}


.group-kpi-blocks .column-bcx-open {
	height: 100%;
	position: relative;
	padding-top: 20px;
	margin-top: 0 !important
}

.group-kpi-blocks .column-bcx-open .bcx-huge-num {
	font-size: 24px;
}

.group-kpi-blocks .column-bcx-open::before {
	content: "";
	position: absolute;
	height: 90%;
	width: 1px;
	right: 0;
	top: 5%;
	border-right: 1px solid #fff;
}



.left-blk {position: relative;}
.left-blk::before {
	position: absolute;
	content: url('../images/icons/telkom-icon.png');
	background: #5392CE;
	top: 0;
	left: -85px;
	padding: 6px 6px 0px 20px;
}

.left-blk::after {
    position: absolute;
    content: 'Productive capital';
    top: 170px;
    left: -136px;
    font-size: 24px;
    font-weight: bold;
    color: #003D6A;
    transform: rotate(-90deg);
	z-index: 1;
}

/* .left-blk::after {
	position: absolute;
	content: '';
	background: url('images/productive-capital.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	width: 85px;
	height: calc(100% - 70px);
	top: 70px;
	left: -85px;
} */

.rev-blk {background: #6290C9;padding: 17px 22px;}
.green-blk {background: #B4CD6E;}
.lblue-blk {background: #5BC2E7;}
.rev-num {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}
.divider {border-bottom: 1px solid #0083C2;}
.cus-h {height: 100%;}
.telkom-l {width: 150px;margin-bottom: 10px;}
.fw-lg {font-weight: 600;}


.monetisation-grouped-arrow .bcx-inner-left {
	margin-left: 22px !important;
	margin-top: 30px !important;
}

.group-kpi-blocks .monetisation-grouped-arrow .bcx-huge-num {
	margin-left: 0;
	text-align: center !important;
}


/*consumer*/


@media screen and (max-width: 1560px) {
	ul.tabs li {
		width: 14%;
	}

}

@media screen and (max-width: 1440px) {
	ul.tabs {
		max-width: 100%;
	}

	ul.tabs li {
		width: 15%;
	}

}

@media screen and (max-width: 1366px) {
	ul.tabs li {
		margin-right: 40px;
	}

	/*ul.tabs li span { top: 22%;}*/
}

@media screen and (max-width: 1080px) {
	.tabs {
		display: none;
	}

	.tab-drawer-heading {
		background: #0083C2;
		color: #fff;
		border-top: 1px solid #fff;
		margin: 0;
		padding: .5em;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.d-active {
		background-color: #005B94;
		color: #fff;
	}

	.tab-drawer-heading:before {
		float: right;
		content: '+';
		speak: none;
		padding-right: .25em
	}

	.d-active:before {
		float: right;
		content: '-';
		speak: none;
		padding-right: .25em
	}

	.ceo-img2 img {
		position: relative;
		left: auto;
		margin: 0 auto;
		display: block;
		text-align: center;
		margin-top: 25px
	}


	.number-one {
		top: -8px;
		left: -10%;
	}

	.number-one1 {
		display: none;
	}

	.number-three {
		display: none;
	}

	.number-one {
		display: none;
	}
}


@media screen and (max-width: 991px) {}


/*from style guide end*/













@media screen and (max-width: 2561px) {
	.snapshot-purpose-circle-line:before {
		bottom: -45%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -69vh;
	}

	.our-values-and-culture-circ {
		left: 0%;
	}
}



@media screen and (max-width: 2560px) {
	.snapshot-purpose-circ-line:after {
		bottom: -69vh;
	}

	.our-values-and-culture-circ {
		left: 0%;
	}
}

@media screen and (max-width: 1917px) {
	.snapshot-purpose-circ-line:after {
		bottom: -73vh;
	}
}

@media screen and (max-width: 1720px) {
	.snapshot-purpose-circle-line:after {
		top: 74%;
		height: 75px;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -50%;
	}

	.snapshot-purpose-circle-two span {
		top: 31%;
		font-size: 15px;
	}

	.snapshot-purpose-circle span span {
		top: 31%;
		font-size: 15px;
	}

	.snapshot-purpose-circ-line:before {
		top: 75%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -73vh;
	}
}

@media screen and (max-width: 1699px) {
	.snapshot-purpose-circle-line:before {
		bottom: -50%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -72vh;
	}

	.alphabet-one {
		font-size: 45px;
	}

	.our-values-and-culture-circ span {
		font-size: 16px;
	}

	.our-vision-content:after {
		top: -17%;
		height: 47px;
	}
}


@media screen and (max-width: 1650px) {
	.show-par {
		display: block;
	}

	.adjust-par {
		display: none
	}
}


@media screen and (max-width: 1607px) {
	.swiftnet-focus div {
		padding-right: 10px;
	}
}

@media screen and (max-width:1560px) {
	.stakeholdersvalue-block {
		min-height: 205px;
	}
}




@media screen and (max-width: 1510px) {
	.t-business-units .heading {
		min-height: 60px;
		height: auto;
	}

	.h2-extend {
		height: 50px
	}

}


@media screen and (max-width: 1500px) {
	.performance-snapshot-circle {
		width: 100%;
	}

	.new-w {
		width: 86%
	}

	ul.gyro-num-circle li {
		width: 11%
	}
}

@media screen and (max-width: 1590px) {

	.emissions-img1,
	.emissions-img2 {
		width: 90%;
	}
}



@media screen and (max-width: 1460px) {
	.t-business-units .header .img-section {
		padding-left: 0
	}
}

@media screen and (max-width: 1451px) {

	.emissions-img1,
	.emissions-img2 {
		width: 100%;
	}

	.snap-block {

		height: 110vh
	}
}



@media screen and (max-width:1440px) {

	.section-heading p {
		font-size: 30px;

	}

	.year-block p,
	.year-info p {
		font-size: 12px;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -44%;
	}

	.snapshot-seam-circle-two {
		width: 98%;
	}

	.snapshot-purpose-circle-two {
		left: 30%;
	}

	.our-vision-content:after {
		left: 49%;
		top: -19%;
	}

	.snapshot-purpose-circle-line:after {
		height: 61px;
	}

	.our-vision-content:before {
		left: 48.8%;
		top: -8%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -84vh;
	}

	.key-focus-block div {
		padding-right: 10px;
	}

	ul.line-list-lgreen {
		padding-left: 10px;
	}
}


@media screen and (max-width: 1300px) {

	.committee-member-name-content .intro {
		font-size: 18px
	}

	.waste-cont img.waste-img {
		width: 70%;
	}

	.h2-extend {
		height: 50px
	}

}


@media screen and (max-width: 1350px) {
	.our-vision-content:before {
		top: -2%
	}

	.our-vision-content:after {
		height: 34px;
		top: -9%;
	}

	.our-values-and-culture-circ {
		width: 100%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -73vh;
	}

	.key-focus-block {
		margin-left: 33px;
	}

	.key-focus-block:before {
		left: -38px;
	}

	.performance-snapshot-circle {
		width: 130%;
	}

	.new-w {
		width: 112%
	}
}

@media screen and (max-width: 1376px) {
	.key-focus-block {
		margin-left: 34px;
	}

	.focus-text {
		font-size: 16px;
	}

	.capitals-circle:after {
		content: '';
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		right: 20px;
		top: 49%;
		background: #007BBE;
		top: auto;
		bottom: -7px;
		right: 48.7%;
	}

	.capitals-circle:before {
		content: '';
		position: absolute;
		width: 1px;
		border-bottom: 1px solid #007BBE;
		right: 50%;
		height: 27px;
		top: auto;
		bottom: -33px;
		background: #007BBE;
	}
}


@media screen and (max-width:1300px) {
	.section-heading p {
		font-size: 35px;
	}

	.section-heading p:nth-child(2) {
		font-size: 40px;
	}
}




@media screen and (max-width:1280px) {
	.stakeholdersvalue-block {
		min-height: 235px;
	}

}

@media screen and (max-width: 1260px) {
	.bcx-focus div {
		padding-right: 10px;
	}

	.bcx-focus {
		margin-left: 22px;
	}
}

@media screen and (max-width: 1250px) {
	.pull-tbl {
		margin-left: -110px;
	}

	ul.gyro-num-circle li {
		width: 15%
	}

	.change-focus {
		margin-left: 13px;
	}

	.change-focus p {
		padding-right: 13px;
	}

	.section-heading p {
		font-size: 25px;
	}
}

@media screen and (max-width:1200px) {

	.chair-name{
  margin-right: -20px;
	}
	.snap-block {
		height: auto;
		background-size: cover;
	}

	.section-heading p:nth-child(2) {
		font-size: 32px;
	}

	.section-intro {
		font-size: 17px;
	}

	.key-focus-block {
		margin-left: 0px;
	}

	.key-focus-block:before {
		display: none;
	}

	/*.capital-wrapper{width:1164px}*/
	.capital-greybg {
		padding: 35px 70px;
	}



}

@media screen and (max-width: 1199px) {
	.performance-snapshot-circle {
		width: 142%;
	}

	.new-w {
		width: 121%
	}

	.product-cap-heading h1:after {
		right: -50px;
		top: 52px;
	}


	.hide-br {
		display: block
	}


	.col-display {
		display: none
	}



}

@media screen and (max-width: 1150px) {
	.performance-snapshot-circle span {
		font-size: 14px;
	}

	.stakeholdersvalue-box {
		padding: 33px
	}
}

@media screen and (max-width: 1110px) {
	.pull-tbl {
		margin-left: -50px;
	}
}

@media screen and (max-width: 1100px) {
	.t-business-units .header .description {
		padding-left: 30px;
	}
}


@media screen and (max-width: 1079px) {
	.change-focus {
		margin-left: 0;
	}
}

@media screen and (max-width: 1050px) {
	.left-page-icons {
		float: none;
		left: 0
	}

	.scrollable {
		overflow: auto;
	}

	.scrollable:before {
		content: '';
		position: absolute;
		bottom: 10px;
		right: 10px;
		height: 50px;
		width: 50px;
		background-size: contain;
		z-index: 2;
	}

	.scrollable.scrolledR:before {
		display: none;
	}

	.intro-med {
		font-size: 18px;
	}

	.performance-snapshot-circle {
		width: 150%;
	}

	.new-w {
		width: 127%
	}

	.performance-snapshot-circle span {
		font-size: 13px;
	}
}

@media screen and (max-width:1024px) {
	.our-vision-content:before {
		left: 30.8%;
		top: -6%;
	}

	.snapshot-purpose-circle-two {
		left: 17%;
	}

	.snapshot-seam-circle-two {
		width: 60%;
	}

	.col-run-over {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.col-run-over-two {
		flex: 0 0 100%;
		max-width: 50%;
	}

	.snapshot-purpose-circ-line:before {
		height: 492px;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -303%;
	}

	.snapshot-purpose-circle {
		width: 27%;
	}

	.snapshot-seam-circle {
		width: 60%;
	}

	.snapshot-purpose-circle-two {
		width: 29%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -28%;
	}

	.our-vision-content:after {
		left: 31%;
		top: -19%;
	}

}



@media screen and (max-width: 991px) {
	.section-heading {
		justify-content: space-between;
	}

	.graph-heading2 {
		color: #fff;
	}

	.section-block {
		padding-left: 35px;
	}

	.snap-block {
		position: relative;
		background-size: cover;
		background-position: right;
	}

	.snap-block::before {
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		background: rgba(255, 255, 255, 0.4);
		position: absolute;
	}

	.tab-switch {
		aspect-ratio: 1/.2;
		margin-bottom: 10px;
	}

	.tab-switch p {
		font-size: 12px;
	}

	.member-info {
		margin-left: 0px;
		padding-left: 0px;
		border: none
	}

	.max-width-block-member {
		max-width: none
	}

	.margin-center {
		left: 0%;
	}

	.year-info::before,
	.year-info::after {
		display: none;
	}

	.timeline-bg .row .col {
		min-width: 25% !important;
		max-width: 25%;
	}

	.year-info,
	.year-block+.year-info {
		margin: 0px;
		border-radius: 0;
		width: 67% !important;
		text-align: center;
		transform: translateX(70%);
	}

	.ceo-img img {
		position: relative;
		margin: 0 auto;
		display: block;
		text-align: center;
		margin-top: 25px;
		margin-top: 0px;
	}

	.color-table .row .col-lg-6:nth-child(even) div {
		border-right: 1px solid #0083C3
	}

	.color-table .row .col-lg-6:nth-child(even) div {
		border-right: 1px solid #0083C3
	}

	.t-business-units .heading {
		min-height: auto;
	}

	.key-focus-block div {
		right: 0;
		bottom: 16px;
	}

	.key-focus-block {
		margin-left: 0;
		margin-bottom: 30px;
	}

	.capital-snapshot-gradient-bg {
		background: linear-gradient(to bottom, #FFF 12%, #CFDDE0 25%);
		padding-left: 30px;
	}

	.performance-snapshot-circle {
		width: 65%;
	}

	ul.line-list-lgreen:before {
		display: none;
	}

	.product-cap-heading h1:after {
		display: none;
	}

	.remove-br {
		display: none
	}

	.pull-tbl {
		margin-left: 0px;
	}

	ul.gyro-num-circle li {
		width: 21%;
		margin-right: 20px;
	}

	.member-container .row,
	.member-container .row .col-lg-4,
	.member-container .row .col-lg-8 {
		height: auto;
	}

	.show-br {
		display: block
	}

	.enviro-goals .disappear {
		display: block
	}

	.t-business-units .header .description {
		padding-left: 0px;
	}

	.waste-cont img.waste-img {
		width: unset;
	}
}

@media screen and (max-width:969px) {
	.snapshot-purpose-circ-line:after {
		bottom: 0%;
	}

	.our-vision-content:before {
		top: -5%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -25%;
	}

	.responsive-space {
		margin-top: 5%;
	}
}

@media screen and (max-width:990px) {
	.size-big-circ span {
		font-size: 15px
	}

	.our-values-and-culture-circ {
		width: 50%;
		margin-bottom: 20%;
		margin: 0 auto;
		left: 0;
	}

	.snapshot-purpose-circle {
		width: 35%;
		margin: 0 auto;
		left: 0;
	}

	.snapshot-purpose-circle-two {
		width: 35%;
		margin: 0 auto;
		left: 0;
	}

	.snapshot-seam-circle-two {
		width: 60%;
		margin: 0 auto;
		left: 0;
	}

	.snapshot-seam-circle {
		width: 60%;
		margin: 0 auto;
		left: 0;
	}

	.snapshot-purpose-circle-line:after {
		height: 80px;
		left: 49%;
		top: 70%;
	}

	.snapshot-purpose-circle-line:before {
		/*left:46%;*/
		bottom: -28%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -36%;
	}

	.snapshot-purpose-circ-line:before {
		height: 115px;
		bottom: -25%;
	}

	.our-vision-content:after {
		left: 50%;
	}

	.our-vision-content:before {
		left: 50%;
	}

	.responsive-space {
		margin-top: 25%;
	}

	/* p {
		text-align: left !important
	} */

	.capital-greybg {
		padding: 35px 15px;
	}

	.borderrgt {
		border-right: 0px solid #0083c2;
		margin-bottom: 30px
	}
}

@media screen and (max-width:900px) {


	.valueintro-block:before {
		content: none
	}

	.valueintro-block:after {
		content: none
	}

}

@media screen and (max-width: 767px) {
	.chair-name{
  margin-right: 40px;
	}
	.capital-wrapper {
		width: calc(100% - 25px);
	}

	.ceo-block {
		padding-left: 22px;
	}
}

@media screen and (max-width:768px) {
	.col-run-over-two {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.snapshot-purpose-circle {
		width: 15%
	}

	.snapshot-seam-circle {
		width: 25%
	}

	.snapshot-seam-circle-two {
		width: 35%;
	}

	.snapshot-purpose-circle-two {
		width: 15%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -33%;
		left: 49%;
	}

	.snapshot-purpose-circ-line:before {
		height: 78px;
		bottom: -17%;
	}

	.snapshot-purpose-circle-line:after {
		height: 68px;
	}

	.our-vision-content:before {
		left: 49%;
		top: -2%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -17%;
	}

	.our-vision-content:before {
		left: 50.2%;
		top: -4%;
	}

	.our-vision-content:after {
		height: 47px;
	}

	.snapshot-seam-circle-two {
		width: 44%;
	}

	.snapshot-sm-circle-two {
		width: 34%;
	}

	.our-values-and-culture-circ {
		width: 28%;
	}

	.responsive-space {
		margin-top: 8%;
	}

	.respond-lead-space {
		margin-top: 8%;
	}

	.t-business-units .header::before {
		height: 392px
	}

	.t-business-units .header::before {
		right: 0;
	}

	.t-business-units .img-section-cont::before {
		left: 0;
		width: 100%;
	}

	.units-wrapper {
		width: calc(100% - 25px);
	}

	.t-business-units::before {
		content: unset
	}

	.t-business-units::after {
		content: unset
	}

	.graph-list li {
		width: 35.2%;
	}

	ul.gyro-num-circle li {
		width: 24%;
		margin-right: 3px;
	}

	.remove-res {
		display: none
	}

	.show-res {
		display: block
	}

	.remove-fr {
		border-right: none !important
	}

	.border-greyL {
		border-left: none !important
	}

	.units-wrapper h3 {
		margin-left: 0
	}

	h1.indent {
		margin-left: 0
	}

	.waste-cont img.waste-img {
		float: unset;
		margin-bottom: 15px;
		margin-left: 0
	}
}


@media screen and (max-width:700px) {
	.col-run-over-two {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.snapshot-purpose-circle {
		width: 35%
	}

	.snapshot-seam-circle {
		width: 50%
	}

	.snapshot-seam-circle-two {
		width: 60%;
	}

	.snapshot-purpose-circle-two {
		width: 35%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -19%;
		left: 49%;
	}

	.snapshot-purpose-circ-line:before {
		height: 53px;
		bottom: -17%;
	}

	.snapshot-purpose-circle-line:after {
		height: 68px;
	}

	.our-vision-content:before {
		left: 49%;
		top: -2%;
	}

	.our-vision-content:before {
		left: 50%;
		top: -6%;
	}

	.our-vision-content:after {
		height: 47px;
	}

	.size-big-circ span {
		font-size: 17px;
	}

	.snapshot-seam-circle-two {
		width: 44%;
	}

	.snapshot-sm-circle-two {
		width: 60%;
	}

	.our-values-and-culture-circ {
		width: 50%;
	}

	.responsive-space {
		margin-top: 8%;
	}

	.respond-lead-space {
		margin-top: 8%;
	}
}

@media screen and (max-width: 576px) {
	.ceo-img img {
		left: initial;
	}

	ul.gyro-num-circle li {
		width: 35%;
		margin-right: 50px;
	}

	.push-dwn50 {
		margin-top: 50px !important;
	}
}

@media screen and (max-width: 575px) {

	.committee-container img {
		margin: 0 auto;
		display: block
	}

	.committee-member-name-content {
		padding: 10px 0px;
	}

	.committee-member-name-content .intro {
		position: relative;
		top: 0px;
		margin-bottom: 10px;
		padding-left: 20px
	}

	.committee-member-name-content .member-name {
		background: transparent;
		position: relative;
		padding: 0% 20px;
		height: auto;
	}

	.committee-container:after {
		width: 100%
	}

	.tab-switch {
		aspect-ratio: 1/.1;
	}

	.timeline-bg .row .col {
		min-width: 100% !important;
		max-width: 100%;
		margin-bottom: 10px;
	}

	.year-block {
		background: #0083C2 !important;
	}

	.year-info {
		aspect-ratio: 1/0.4;
	}

	#year-2010 .year-info {
		background-color: #49C7ED;
	}

	#year-2020 .year-info {
		background-color: #49C7ED;
	}


	.year-info.w-0 {
		display: none;
	}

	.t-business-units .header .description {
		padding-top: 0;
	}

	.size-big-circ span {
		font-size: 15px
	}

	.performance-snapshot-circle {
		width: 35%;
		margin: 0 auto;
		margin-bottom: 43px;
	}

	.performance-snapshot-circle-inv {
		float: none;
		margin-top: 20px
	}
}









@media screen and (max-width: 1440px) {
	.S1440-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S1440-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.chair-green-bord .bigger-txt {
		font-size: 18px !important;
	}

	.chair-crc-txt p {
		font-size: 14px;
	}

	.chair-blue-bord .bigger-txt {
		font-size: 18px !important;
	}

	.capital-h1 h1 {
		font-size: 25px
	}





}




@media screen and (max-width: 1380px) {
	.S1350-25 {
		flex: 0 0 auto;
		max-width: 25%;
	}

	.S1350-75 {
		flex: 0 0 auto;
		max-width: 75%;
	}

	.S1350-30 {
		flex: 0 0 auto;
		max-width: 30%;
	}

	.S1350-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

}






@media screen and (max-width: 1330px) {
	.S1330-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S1330-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

}

@media screen and (max-width: 1280px) {

	.S1280-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S1280-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}
}



@media screen and (max-width: 1200px) {

	.S1200-58 {
		flex: 0 0 auto;
		max-width: 58%;
	}

	.S1200-41 {
		flex: 0 0 auto;
		max-width: 41%;
	}

	.S1350-25 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.S1350-75 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.S1350-30 {
		flex: 0 0 auto;
		max-width: 100%;
	}


	.swift-block-bottom .coloum-bcx {
		min-height: 220px !important;
	}

}







@media screen and (max-width: 1000px) {
	.S1000-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	/*.S1000-75 {    flex: 0 0 auto;     max-width: 100%;}*/

}






@media screen and (max-width: 680px) {

	.S680-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S680-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}


}


@media screen and (max-width: 480px) {

	.S680-50 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.S480-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S480-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

}






@media screen and (max-width: 991px) {

	.S1200-58 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.S1200-41 {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.security-bg-white {
		margin-top: 20px !important;
	}
}
















@media screen and (max-width: 530px) {
	.telkoms-impactImg {
		float: unset;
		display: block;
		margin: 0 auto;
		width: 70%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.add-mrg-t {
		margin-top: 20px;
	}



}


@media screen and (max-width:500px) {
	.col-run-over-two {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.snapshot-purpose-circle {
		width: 35%
	}

	.snapshot-seam-circle {
		width: 50%
	}

	.snapshot-seam-circle-two {
		width: 60%;
	}

	.snapshot-purpose-circle-two {
		width: 35%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -19%;
		left: 49%;
	}

	.snapshot-purpose-circ-line:before {
		height: 53px;
		bottom: -17%;
	}

	.snapshot-purpose-circle-line:after {
		height: 68px;
	}

	.our-vision-content:before {
		left: 49%;
		top: -2%;
	}

	.our-vision-content:before {
		left: 50%;
		top: -6%;
	}

	.our-vision-content:after {
		height: 47px;
	}

	.snapshot-seam-circle-two {
		width: 44%;
	}

	.snapshot-sm-circle-two {
		width: 60%;
	}

	/*.our-values-and-culture-circ{width: 28%;}*/
	.responsive-space {
		margin-top: 8%;
	}

	.respond-lead-space {
		margin-top: 8%;
	}
}

@media screen and (max-width: 497px) {
	.key-focus-block {
		text-align: center;
		padding-top: 0;
	}

	.key-focus-block div {
		position: unset;
		text-align: center;
		margin-top: 30px;
		padding-right: 0;
		border: none;
	}

	.key-focus-block div p {
		text-align: center;
	}
}

@media screen and (max-width: 473px) {
	.foot-print {
		float: unset;
		display: block;
		margin: 0 auto;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 20px;
	}
}


@media screen and (max-width: 425px) {
	.switch-green-intro {
		padding: 30px 20px;
	}

	.our-vision-content:before {
		left: 50.2%;
	}

	.snapshot-purpose-circle {
		width: 35%;
	}

	.snapshot-purpose-circle-two {
		width: 40%;
	}

	.snapshot-seam-circle {
		width: 47%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -11%;
		left: 49%;
	}

	.snapshot-purpose-circ-line:before {
		height: 78px;
		bottom: -17%;
	}

	.snapshot-purpose-circle-line:after {
		height: 54px;
	}

	.our-vision-content:before {
		left: 50%;
		top: -7%;
	}

	.snapshot-seam-circle-two {
		width: 68%;
	}


	.graph-list li {
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}
}

@media screen and (max-width: 402px) {
	ul.gyro-num-circle li {
		width: 45%;
		margin-right: 12px;
	}
}

@media screen and (max-width: 375px) {
	.product-cap-heading h1:after {
		display: none;
	}

	.snapshot-seam-circle-two {
		width: 80%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -17%;
	}

	.telkoms-impactImg {
		width: 100%
	}

	.h2-extend {
		height: 60px;
	}

}



@media screen and (max-width:320px) {
	.snapshot-purpose-circle {
		width: 40%;
	}

	.snapshot-purpose-circ-line:before {
		height: 57px;
	}

	.snapshot-purpose-circle-line:after {
		height: 54px;
	}

	.our-vision-content:before {
		top: -7%;
	}

	.snapshot-seam-circle-two {
		width: 95%;
	}

	.our-values-and-culture-circ {
		width: 58%;
	}

	.snapshot-seam-circle {
		width: 64%;
	}

	.snapshot-purpose-circle-line:before {
		bottom: -20%;
	}

	.snapshot-purpose-circ-line:after {
		bottom: -17%;
	}
}

/* =======NEW STYLES ADDED============ */
.home-banner-holder {
	width: 100%;
	min-height: 100%;
	background: url("../images/telkom-snapshot-banner.png");
	background-size: cover;
	/* padding-left: 85px; */
	overflow: hidden;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0px 48px;
	margin-bottom: 50px;
}

.index-banner-block {
	width: 100%;
	min-height: 90vh;
	background-size: cover;
	padding-left: 85px;
	overflow: hidden;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0px 48px;
}

.section-banner-box {
	margin-top: 45px;
	width: 100%;
	line-height: 1;
	padding-top: 30px;
	margin-left: 85px;
	min-height: 100%;
	position: relative;
	padding: 15px;
	/* text-align: center; */
	background: linear-gradient(0deg, rgb(255 255 255 / 0) -45%, #0065a7 32%);
	padding-bottom: 30px;
	margin-right: 50px;
}

.section-banner-box::before {
	content: "";
	position: absolute;
	width: 100%;
	border-top: 2px solid #fff;
	left: 0;

}

.section-banner-box::after {
	content: "";
	position: absolute;
	width: 100%;
	border-bottom: 2px solid #fff;
	left: 0;

}

.report-type {
	padding: 0 0;
	font-size: 35px;
	color: #fff;
	position: relative;
	padding-top: 24px;
	font-weight: 700 !important;
	padding-left: 120px;
}

.line-left-white {
	border-left: 2px solid #fff;
}

.the-year {
	padding: 0 0;
	font-size: 16px;
	color: #fff;
	position: relative;
	/* padding-top: 24px; */
	font-weight: 500 !important;
	padding-left: 120px;
}

.banner-top-space {
	margin-top: 45%;
}

.right-banner-head {
	width: 100%;
	line-height: 1;
	padding-top: 30px;
	min-height: 100%;
	position: relative;
	padding-left: 120px;
	background: linear-gradient(0deg, rgb(255 255 255 / 0) 7%, #0065a7 75%);
	padding-bottom: 30px;
	margin-right: 50px;
}

.right-banner-head a {
	text-decoration: none;
}


.header-table {
	background: #003D6A;
	color: #fff;
	font-weight: 600;
}

.bg-table {
	background: #EDF3F5;
	padding: 10px;
}

.bg-table-red {
	background: #DC0D1D;
	padding: 5px;
	color: #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.bg-table-orange {
	background: #F9B112;
	padding: 5px;
	color: #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.bg-table-yellow {
	background: #FFED00;
	padding: 5px;
	color: #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.bg-table-grey {
	background: #54616C;
	padding: 5px;
	color: #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.bg-emerging {
	background: #D8E4E8;
}



/*Capitals top section*/

.switch-bg-drkblue {
	background-color: #1D1E3F !important;
}

.esg-border {
	position: relative;
	border-left: 1px solid #fff;
	padding-left: 30px
}

.esg-border p {
	font-weight: 500 !important
}

.esg-border:before {
	position: absolute;
	content: '';
	top: -4px;
	left: -20px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.esg-border strong,
b {
	font-weight: 600 !important;
	font-family: 'Telkom123 Light', 'Calibri', Arial, Helvetica, sans-serif !important;
}

.dr-mmaki {
	border-left: 1px solid #005892;
	padding-left: 20px;
	min-height: 100%
}



.climate-circle {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 2px solid #44C7EE;
	position: relative;
	margin-bottom: 20px;
	text-align: center;
}

.open-space {
	padding: 5px 0;
	width: 100%;
	text-align: center;
}

.white-circle {
	position: relative;
	margin: 10px 0;
	border: 2px solid #00ADE9;
	border-radius: 50%;
	text-align: center;
	height: 240px;
	width: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	word-wrap: break-word;
	padding: 10px;
	margin: 0 auto;
}

.white-circle:after {
	position: absolute;
	content: '';
	top: 0;
	right: -25px;
	width: 54px;
	height: 20px;

}

.white-circle p {
	font-weight: 600;
	text-align: center !important;
}

.finheader-nb2 {
	background: #00ADE9;
	color: #fff;
	font-weight: bold !important;
	font-family: Telkom123 Bold;
	border-bottom: 1px solid #ffffff;
}

.switch-bgb2-blue {
	background: #007BBE !important;
}


@media screen and (max-width: 1518px) {

	.S1518-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S1518-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

}



@media screen and (max-width: 1200px) {

	.S1200-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S1200-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

}


@media screen and (max-width: 991px) {

	.dr-mmaki {
		border-left: 0px solid #005892;
		padding-left: 0px;
		border-top: 1px solid #005892;
		padding-top: 20px;
		min-height: 100%
	}
}


@media screen and (max-width: 800px) {

	.S800-50 {
		flex: 0 0 auto;
		max-width: 50%;
	}

	.S800-100 {
		flex: 0 0 auto;
		max-width: 100%;
	}

}

.boxed-bcx-intro-img {
	background: url(../images/bcx-intro.jpg);
	background-size: cover;
	position: relative;
	background-position: center top;

}

.grayed-block-texted-white {
	height: 100%;
	color: #fff;
	padding: 40px;
	padding-left: 25px;
	background-image: linear-gradient(to bottom, #55626D, #55626dd1);
}

.grayed-block-texted-white p,
.grayed-block-texted-white-head h4 {
	color: #fff;
}

.ted-head-text-whited {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-image: linear-gradient(to bottom, #55626d7d, #55626d94);
}

.ted-head-text-whited-no-overly {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;

}

.ted-head-text-whited-head {
	height: 190px;
	overflow: hidden;
	background: #000;
	border-radius: 50%;
	width: 190px;
	color: #fff;
	text-align: center;
	padding: 20px;
	padding-top: 93px;
	font-size: 20px;
	position: absolute;
	right: 10%;
	top: -81px;
	font-weight: 600;
	z-index: 9;
}



.grayed-block-texted-white-head {
	position: relative;
}

.grayed-block-texted-white-head img {
	position: absolute;
	left: -37px;
	top: 3px;
	max-width: 26px;

}

.lined-white-bcx-box {
	border-bottom: 2px solid #fff;
	margin: 10px 0px;
}

.process-background {
	padding: 15px;
	height: 100%;
	position: relative;
	padding-top: 20px;
	padding-left: 0;
	padding-right: 0px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top right;

}

.bcx-blk::after {color: #fff;}
.bcx-img-blk {position: relative;}
.bcx-img-blk::after {
	position: absolute;
	content: '';
    background-image: url('../images/bcx-left-img.png');
    background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom right;
    width: 86px;
    left: -85px;
    top: 70px;
	bottom: 0;
}

.bcx-img-blk::before {
    position: absolute;
    content: '';
    background-image: linear-gradient(to bottom, #000000de 6%, transparent 21%);
    left: -85px;
    top: 70px;
    bottom: 0;
    width: 86px;
    z-index: 1;
}
.bcx-blk::before {
    content: url('../images/icons/bcx-icon.png');
    background: #DC0D1D;
}
.min-h-lg {min-height: 375px;}

.openserve-blk::before {
    content: url('../images/icons/openserve-icon.png');
    background: #13A538;
}
.min-h-md {min-height: 351px;}
.openserve-img-blk::after {
    background-image: url('../images/openserve-left-img.png');
}

@media screen and (max-width: 1199px) {
	.bcx-blk::before {padding: 5px 6px 0px 20px;}
	.bcx-img-blk {padding-top: 86px;}
	.bcx-img-blk::after {
		background-image: url('../images/bcx-left-img2.png');
		width: 100%;
		height: 70px;
		left: 0;
		top: 0;
		bottom: auto;
	}
	.bcx-img-blk::before {
		width: 100%;
		height: 70px;
		left: 0;
		top: 0;
		bottom: auto;
		background-image: linear-gradient(to right, #000000de 6%, transparent 21%);
	}

	.left-blk::after, 
	.bcx-blk::after {
        width: 100%;
        height: 86px;
        left: 20px;
        top: 12px !important;
        bottom: auto;
        transform: rotate(0);
    }

	.left-blk::after {left: 100px;}
	.padding-T {padding-top: 70px;}
	.int-cap-blk::after, .human-cap-blk::after {left: 20px !important;}
	.openserve-img-blk::after {
	    background-image: url('../images/openserve-left-img2.png');
	}
	.left-blk::before {padding: 5px 6px 0px 20px;}
}

@media screen and (max-width: 1100px) {
	.bcx-blk::before, .left-blk::before {padding: 6px 6px 0px 20px;}
}

@media screen and (max-width: 991px) {
 .process-background{
	height: auto;
	margin-bottom: 30px;
 }

 .int-cap-blk::after, .human-cap-blk::after {
    left: 100px !important;
}

 .left-blk::before {margin-left: 85px;padding: 5px 6px 0px 20px;}

 .min-h-md {
    min-height: auto;
    margin-bottom: 20px;
}

 .bcx-blk::before {margin-left: 85px;padding: 5px 6px 0px 20px;}
 .bcx-img-blk::before {left: 86px;width: calc(100% - 86px);}
 .bcx-img-blk::after {left: 86px;width: calc(100% - 86px);}
 .bcx-blk::after {left: 100px;}
 .min-h-lg {min-height: auto;margin-bottom: 20px;}
}

@media screen and (max-width: 425px) {
	.left-blk::after, .left-blk::after {font-size: 20px;}
	.bcx-blk::after {top: 18px;}
	.bcx-blk::before {padding: 6px 6px 0px 20px;}

					.glosary-box-name-holder {    display: block;}
					.glosary-box-name-decrip,
					.glosary-box-name-text {
						float: none;
						width: 100%;
						flex: none;
					}
				}