:root {
  --cgc-white: #ffffff;

  /* VARIABLE COLLECTION */
  --color-black: #222222;

  --cgc-bg-gray: #f3f3f3;
  --cgc-red: #C93627;
  --cgc-blue: #003a70;
  --cgc-panel-bg: #EBEBEC;
  --cgc-light-blue: #4c6078;
  --cgc-border-gray: #cccccc;
  --cgc-gray: #999999;
  --cgc-teal: #008090;
  --cgc-orange: #ec6608;
  --cgc-light-orange: #eda343;
  --cgc-light-orange2: #fdf1df;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --gap: 36px;
  --gap12: calc(var(--gap) / 3);
  --gap24: calc(var(--gap) / 3 * 2);
  --gap18: calc(var(--gap) / 2);
  --gap10: calc(var(--gap) / 4);
  --gap48: calc(var(--gap) / 3 * 4);
  --gap72: calc(var(--gap) * 2);
  --gap108: calc(var(--gap) * 3);

  --base-font-size: 14px;

  --logo-height: 32px;
  --top-bar-padding: 12px;
  --panel-top: calc(var(--logo-height) + var(--top-bar-padding) + var(--top-bar-padding));
  --panel-bottom: 0px;
  --menu-width: 0px;
  --custom-anime: all 1.2s cubic-bezier(0.77, 0.2, 0.05, 1.0);

  --cgc-gradient: linear-gradient(90deg, rgba(221, 221, 221, 1) 0%, rgba(253, 241, 223, 1) 95%);
  --cgc-gradient2: linear-gradient(90deg, rgba(253, 241, 223, 1) 0%, rgba(221, 221, 221, 1) 95%);
  --cgc-gradient3: linear-gradient(0deg, rgba(253, 241, 223, 1) 0%, rgba(255, 255, 255, 1) 95%);
  --cgc-gradient4: linear-gradient(0deg, rgba(253, 241, 223, 1) 0%, #33cfb4 95%);
  --cgc-gradient-leadership: linear-gradient(0deg, rgba(186, 215, 241, 1) 0%, rgba(253, 241, 223, 1) 80%);
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
}

html,
body {
  font: 400 normal var(--base-font-size) / 1.6em Arial, sans-serif;
  color: var(--color-black);
  box-sizing: border-box;
}

.fp-enabled body {}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* General */

body {
  background-color: #ffffff;
  line-height: 1.4em;
}

a {
  text-decoration: none;
  color: #003a70;
}

sup {
  vertical-align: super;
  font-size: 0.6em;
  line-height: 1em;
}

sub {
  vertical-align: sub;
  font-size: 0.6em;
  line-height: 1em;
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

/* Template */
.row {
  display: flex;
  gap: var(--gap);
  position: relative;
  padding: var(--gap);
  box-sizing: border-box;
}

.col {
  position: relative;
  flex-basis: 100%;
  z-index: 2;
}

.wrap {
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom */
video {
  display: block;
}

video:focus {
  outline: none;
}


/* Welcome */
.row .text>p {
  margin-bottom: 0.5em;
}

.row .text>p:last-of-type {
  margin-bottom: 0;
}

/* Fix flex vs slick issue */
* {
  min-width: 0;
  min-height: 0;
}

.charts {
  display: flex;
  gap: calc(var(--gap)/2);
  align-items: start;
  flex-wrap: wrap;
  justify-content: center;
}

.charts .chart {
  flex-basis: calc((100% - (var(--gap)*3)) / 4);
  position: relative;
  background-color: var(--cgc-white);
  color: #222222;
  border-radius: 1rem;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
  padding: var(--gap18);
  display: flex;
  flex-direction: column;
}

.charts .chart .chart-title {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1em;
  padding-top: 0.4em;
  min-height: 4em;
}

.charts .chart .chart-title .unit {
  display: block;
  font-weight: 400;
  font-size: 0.9em;
}

.charts .chart .chart-content {
  position: relative;
  flex-basis: 100%;
}

.charts .chart .chart-content canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.charts .chart .chart-content .placeholder {
  display: block;
  width: 100%;
  height: auto;
}

.icon-charts .icon-chart.sustain2 .chart-title {
  background: var(--cgc-gradient);
  color: var(--cgc-white);
  line-height: 1.1em;
  font-size: 1rem;
  text-align: center;
}

.icon-charts .icon-chart.sustain2 .chart-content {
  background-color: rgba(255, 255, 255, 0.8);
  padding: var(--gap24);
}

.icon-charts .icon-chart.sustain2 .chart-content p {
  margin-bottom: 1em;
}

.icon-charts .icon-chart.sustain2 .chart-content .chart {
  max-width: 360px;
  display: block;
  margin: 0 auto;
}

.icon-charts .icon-chart.sustain2 .chart-content.netzero {
  padding: var(--gap);
}

.icon-charts .icon-chart.sustain2 .chart-content.netzero .icon {
  display: block;
  width: 40%;
  max-width: 100px;
  margin-bottom: var(--gap);
}

.icon-charts .icon-chart.sustain2 .chart-content.netzero p {
  font-size: 1.4rem;
  line-height: 1.4em;
}

.icon-charts .icon-chart.sustain2 .chart-content.netzero p em {
  font-weight: bold;
  color: var(--cgc-orange);
  font-size: 1.3em;
}

.agenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap18);
  margin-bottom: var(--gap);
  --inherit-gap: var(--gap18);
}

.agenda img {
  display: block;
  flex-basis: calc((100% - var(--inherit-gap)*2)/3);
  width: 100%;
  height: auto;
}

.share-menu {
  padding: var(--gap18) var(--gap24);
  position: absolute;
  left: 0;
  background-color: var(--cgc-white);
  border-radius: var(--gap18);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: var(--gap10);
}

.share-menu:not(.show) {
  display: none;
}

/* New */
section {
  width: 100%;
  height: 100%;
  position: relative;
}

.h1 {
  font-size: 64px;
  font-style: normal;
  font-weight: 900;
  line-height: 64px;
  /* 100% */
  text-transform: uppercase;
  width: 100%;
  left: 0px;
  color: var(--color-black);
}

.h3 {
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 32px;
  width: 100%;
  left: 0px;
  mix-blend-mode: difference;
  color: var(--color-black);
}

.progress-bar {
  z-index: 101;
  position: fixed;
  width: 5px;
  height: 100%;
  left: 0;
  top: var(--panel-top);
  background-color: #1D3D6E;
}

.progress-bar .active {
  width: 100%;
  height: calc(100%/9);
  background-color: #f7941d;
  transition: all 0.4s linear;
}

.progress-tab {
  z-index: 101;
  position: fixed;
  width: calc(100% - 140px - var(--gap18));
  height: auto;
  right: 0;
  top: 0;
  display: flex;
  justify-content: end;
  gap: var(--gap12);
  align-items: center;
  padding: 0 var(--gap18);
  height: var(--panel-top);
}

.progress-tab li {
  flex-shrink: 1;
  flex-grow: 0;
}

.progress-tab a {
  cursor: pointer;
  display: block;
  color: var(--cgc-blue);
  font-size: 12px;
  line-height: 1.2em;
  padding: 0;
  transition: all 300ms linear;
}

.progress-tab li a .label {
  display: inline-block;
}

.progress-tab li.active a {
  color: var(--cgc-orange);
}

.scroll-arrow {
  position: fixed;
  right: var(--gap12);
  bottom: var(--gap18);
  z-index: 100;
  cursor: pointer;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  padding: var(--top-bar-padding) var(--gap24);
  background-color: #ffffff;
  transition: all 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.open-menu .top-bar {
  z-index: 102;
  box-shadow: none;
}

.logo {
  display: block;
  margin: 0;
}

.logo img {
  display: block;
  height: var(--logo-height);
  width: auto;
  margin: 0 auto 0 0;
}

.logo img.hide,
.scroll-arrow img.hide {
  display: none;
}

.video-box {
  width: calc(100vw - var(--menu-width));
  height: calc(100vh - var(--panel-top));
  height: calc(100dvh - var(--panel-top));
  background-color: #e8e7e9;
  position: absolute;
  z-index: 3;
}

.video-box.disappear {
  opacity: 0;
  transition: all 600ms linear;
}

.video-box.hide {
  display: none;
}

.panel-content-text .quote {
  font-size: 1.4rem;
  line-height: 1.3em;
  position: relative;
  padding-bottom: var(--gap18);
}

.panel-ceo .panel-content-text .quote {
  font-size: 1.4rem;
}

.panel-content-text .quote:before {
  content: ' ';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: transparent url(../img/icon-open-quote.svg) center center/contain no-repeat;
  position: absolute;
  transform: translateX(-100%);
  margin-left: -0.3em;
  margin-top: -0.2em;
}

.panel-content-text .quote:after {
  content: ' ';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: transparent url(../img/icon-close-quote.svg) right center/contain no-repeat;
  align-self: end;
  transform: translateY(0.2em);
  margin-left: 0.3em;
  position: absolute;
}

.panel-content-text .who {
  color: #222222;
  font-size: 1.1rem;
  line-height: 1.2em;
}

.panel-content-text .who .name {
  font-weight: bold;
  color: var(--cgc-blue)
}

.panel-content-text .who .position {
  font-size: 0.9rem;
}

.panel-content-box {
  display: block;
  height: auto;
  max-width: 50%;
  width: 100%;
  margin-left: 50%;
}

.panel-content-box .panel-content-inner {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap24);
  padding: var(--gap);
}

.panel-success-stories .panel-content-box .panel-content-inner {
  gap: var(--gap24);
}

.panel-content-box.full .panel-content-inner {
  max-width: none;
}

.panel-content-box .panel-content-inner .title-img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}

.panel-content-box .btn-download {
  display: block;
}

.panel-content-box.full .btn-download {
  margin: 0 auto;
}

.panel-content-box .btn-download img {
  display: block;
  height: 3rem;
  width: auto;
}

.panel-content-box.full {
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.panel-content-box:not(.full) .panel-content-inner .section-title {
  height: calc(2.4rem * 2.5);
}

.panel-ceo .panel-content-box:not(.full) .panel-content-inner .section-title {
  height: calc(2.4rem * 5);
}

.panel-content-box.full .panel-content-inner .section-title {
  height: 2.4rem;
}

.panel-key-highlights .panel-content-box.full .panel-content-inner .section-title {
  height: 2.6rem;
}

.panel-success-stories .panel-content-box.full .panel-content-inner .section-title {
  height: 2rem;
}

.panel-material .panel-content-box.full .panel-content-inner .section-title,
.panel-5-years .panel-content-box.full .panel-content-inner .section-title,
.panel-governance .panel-content-box.full .panel-content-inner .section-title {
  height: calc(2.4rem * 2);
}

.panel-leadership .panel-content-box.full .panel-content-inner .section-title {
  height: 3rem;
}

.panel-content-box.full .panel-content-inner .title-img {
  width: auto;
  height: 100%;
  margin: 0 auto;
  display: block;
}

.key-highlights {
  color: #003a70;
  text-align: center;
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  justify-content: center;
}

.key-highlights .key-highlight {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
}

.key-highlights .key-highlight.financial {
  flex-basis: calc((100% - 3vw)/5*3);
  border-right: 1px dashed var(--cgc-gray);
  padding-right: var(--gap);
}

.key-highlights .key-highlight.business {
  flex-basis: calc((100% - 3vw)/5*2);
}

.key-highlights .key-highlight .row {
  padding: 0;
  display: flex;
  gap: 0;
}

.key-highlights .key-highlight .row .col {
  font-size: 1.1rem;
  line-height: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  justify-content: center;
  border-bottom: 1px dotted #666666;
  border-right: 1px dotted #666666;
  padding: 2em 1em;
  background-color: #ffffff;
  opacity: 0;
  transform: translateX(20%);
  transition: all 600ms ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.key-highlights .key-highlight .row .col:nth-child(1) {
  transition-delay: 600ms;
}

.key-highlights .key-highlight .row .col:nth-child(2) {
  transition-delay: 800ms;
}

.key-highlights .key-highlight .row .col:nth-child(3) {
  transition-delay: 1000ms;
}

.panel-key-highlights.active .key-highlights .key-highlight .row .col {
  opacity: 1;
  transform: translateX(0);
}

.key-highlights .key-highlight .row .col * {}

.key-highlights .key-highlight .row .col.gray {
  background-color: #f3f3f3;
}

.key-highlights .key-highlight .row .col.orange {
  background-color: #f7941d;
}

.key-highlights .key-highlight .row .col.blue {
  background-color: var(--cgc-blue);
}

.key-highlights .key-highlight .row .col.orange *,
.key-highlights .key-highlight .row .col.blue * {
  color: #ffffff;
}

.key-highlights .key-highlight .row .col.orange .heading,
.key-highlights .key-highlight .row .col.blue .heading {
  color: #f3f3f3;
}

.key-highlights .key-highlight .rows {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
}

.key-highlights .key-highlight .rows .row {
  flex-basis: 100%;
}

.key-highlights .key-highlight .highlight-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1em;
  color: var(--color-blue);
  justify-content: center;
}

.key-highlights .key-highlight .row .col:last-child {
  border-right: 0;
}

.key-highlights .key-highlight .row:last-child .col {
  border-bottom: 0;
}

.key-highlights .key-highlight .row .col .heading {
  font-size: 1em;
  line-height: 1em;
  color: var(--color-black);
}

.key-highlights .key-highlight .row .col .main-number {
  font-weight: bold;
  font-size: 1.8em;
  line-height: 1em;
}

.key-highlights .key-highlight .row .col .main-number .number {
  line-height: 1em;
}

.key-highlights .key-highlight .row .col .unit {
  font-size: 1em;
  line-height: 1em;
}

.key-highlights .key-highlight .row .col .space {
  height: 0.1em;
}

.key-highlights .key-highlight .row .col>* {
  flex-shrink: 0;
}

.success-stories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap24);
  --story-col: 4;
  margin-top: var(--gap18);
  margin-left: var(--gap);
  margin-right: var(--gap);
}

.success-stories .success-story {
  flex-basis: calc((100% - (var(--gap24) * (var(--story-col) - 1))) / var(--story-col));
  transition: all 600ms ease-in-out;
  cursor: pointer;
}

.success-stories .success-story .story-box {
  position: relative;
}

.success-stories .success-story.story1,
.success-stories .success-story.story2,
.success-stories .success-story.story3,
.success-stories .success-story.story4 {
  transition-delay: 400ms;
  opacity: 0;
  transform: scale(0.3);
  transition-duration: 600ms;
}

.success-stories .success-story.story5,
.success-stories .success-story.story6,
.success-stories .success-story.story7,
.success-stories .success-story.story8 {
  transition-delay: 800ms;
  opacity: 0;
  transform: scale(0.3);
  transition-duration: 600ms;
}

.active .success-stories .success-story.story1,
.active .success-stories .success-story.story2,
.active .success-stories .success-story.story3,
.active .success-stories .success-story.story4,
.active .success-stories .success-story.story5,
.active .success-stories .success-story.story6,
.active .success-stories .success-story.story7,
.active .success-stories .success-story.story8 {
  opacity: 1;
  transform: scale(1);
}

.success-stories .success-story .story-title {
  height: 2.4rem;
  margin-bottom: var(--gap12);
}

.success-stories .success-story .story-title img {
  display: block;
  height: 100%;
  width: auto;
}

.success-stories .success-story.story11 .story-title img {
  height: 70%;
}

.success-stories .success-story .story-image {
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  border-radius: var(--gap10);
  overflow: hidden;
}

.active .success-stories .success-story:hover .story-image {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  z-index: 10;
  transition-duration: 0.4s;
  transform: scale(1.05);
}

.success-stories .success-story .story-image img {
  width: 100%;
  height: auto;
  display: block;
}

.content-sustain {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: calc(var(--gap)/2);

}

.content-sustain img {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

.content-sustain .content-box {
  background-color: #ffffff;
  border-radius: var(--gap18);
  padding: var(--gap24);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}

.content-sustain .content-box .desc {
  background-color: #FAEBD8;
  padding: var(--gap18);
  margin-bottom: var(--gap18);
  opacity: 0;
  transform: translateX(-50%);
  transition: all 1s ease-in-out;
}

.content-sustain .content-box .chart-sustain {}

.content-sustain .content-box .chart-sustain img {
  display: block;
  width: 100%;
  height: auto;
}

.content-sustain .sustain-box {
  margin-right: 0;
  margin-left: auto;
}

.content-sustain .sustain-box img {
  margin: 0;
}

.content-sustain img.title-img {
  margin-left: 0;
}

.content-sustain .col {}

.content-sustain .col:first-of-type {
  flex-basis: 60%;
  height: 100%;
}

.content-sustain .col:last-of-type {
  flex-basis: 40%;
  text-align: center;
}

.content-sustain .col:last-of-type .desc {
  margin-top: 1em;
}

.content-sustain .col:last-of-type .btn-download {
  margin-top: 2vw;
}

.download-section {
  display: flex;
  margin: 0 auto;
  align-items: center;
  width: 100%;
  gap: 0;
  height: calc(100vh - var(--panel-top));
  height: calc(100dvh - var(--panel-top));
}

.download-section .col {
  flex-basis: 50%;
}

.download-section .col:first-of-type {
  background-color: #dddddd;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
}

.download-section .col:last-of-type {
  display: flex;
  align-items: center;
  height: 100%;
  padding: var(--gap);
  background: var(--cgc-gradient);
}

.panel-downloads2 .download-section .col:first-of-type {
  flex-basis: 45%;
}

.panel-downloads2 .download-section .col:last-of-type {
  flex-basis: 55%;
}

.download-section .col .download-box {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
  padding: var(--gap48);
  border-radius: 1rem;
  width: 100%;
}

.download-section .col .title-img {
  margin-left: 0 !important;
}

.download-section .col .download-lists {
  display: flex;
  align-items: start;
  gap: 1em;
}

.download-section .col .download-lists .download-list {
  flex-basis: 100%;
}

.download-section .col .download-list {
  font-size: 1.2rem;
  line-height: 1em;
  margin-top: var(--gap24);
  display: inline-block;
}

.download-section .col .download-list a {
  display: inline-flex;
  gap: 1em;
  align-items: center;
  font-weight: bold;
  transition: all 200ms ease-in-out;
}

.download-section .col .download-list a:hover {
  color: var(--cgc-orange);
}

.download-section .col .download-list a:before {
  content: ' ';
  display: block;
  background: transparent url(../img/icon-download.svg) no-repeat center center;
  background-size: contain;
  width: 1.8em;
  height: 1.8em;
  flex-shrink: 0;
}

.download-section .col .footnote {
  margin-top: var(--gap24);
  font-size: 0.8rem;
  line-height: 1.3em;
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.material-box-wrap {
  background-color: #ffffff;
  padding: var(--gap24);
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1rem;
}

.material-box {
  position: relative;
  height: 100%;
  width: 100%;
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l1 {
  opacity: 0;
  transition: all 1000ms ease-in-out;
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l2,
.panel-material .panel-content-box.full .panel-content-inner .material-chart.l3,
.panel-material .panel-content-box.full .panel-content-inner .material-chart.l4,
.panel-material .panel-content-box.full .panel-content-inner .material-chart.l5,
.panel-material .panel-content-box.full .panel-content-inner .material-chart.l6,
.panel-material .panel-content-box.full .panel-content-inner .material-chart.l7,
.panel-material .panel-content-box.full .panel-content-inner .material-chart.l8 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 1000ms ease-in-out;
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l1 {
  transition-delay: 200ms;
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l2 {
  transition-delay: 400ms;
  transform: translateX(15%);
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l3 {
  transition-delay: 600ms;
  transform: translateX(-15%);
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l4 {
  transition-delay: 800ms;
  transform: translateX(15%);
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l5 {
  transition-delay: 1000ms;
  transform: translateX(-15%);
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l6 {
  transition-delay: 1200ms;
  transform: translateX(15%);
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l7 {
  transition-delay: 1400ms;
  transform: translateX(-15%);
}

.panel-material .panel-content-box.full .panel-content-inner .material-chart.l8 {
  transition-delay: 1600ms;
  transform: translateX(15%);
}

.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l1,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l2,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l3,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l4,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l5,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l6,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l7,
.panel-material.active .panel-content-box.full .panel-content-inner .material-chart.l8 {
  opacity: 1;
  transform: none;
}

.sustain-box {
  position: relative;
  height: 100%;
  width: 100%;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l1 {
  opacity: 0;
  transition: all 600ms ease-in-out;
  transition-delay: 100ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l2,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l3,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l4,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l5,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l6,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l7,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l8,
.panel-sustain .panel-content-box.full .panel-content-inner .chart.l9 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 600ms ease-in-out;
  transform: translateX(20%);
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l2 {
  transition-delay: 400ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l3 {
  transition-delay: 600ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l4 {
  transition-delay: 800ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l5 {
  transition-delay: 1000ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l6 {
  transition-delay: 1200ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l7 {
  transition-delay: 1400ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l8 {
  transition-delay: 1600ms;
}

.panel-sustain .panel-content-box.full .panel-content-inner .chart.l9 {
  transition-delay: 1800ms;
}

.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l1,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l2,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l3,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l4,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l5,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l6,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l7,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l8,
.panel-sustain.active .panel-content-box.full .panel-content-inner .chart.l9 {
  opacity: 1;
  transform: translateX(0);
}

.panel-chairman:before {
  content: ' ';
  display: block;
  position: absolute;
  left: var(--menu-width);
  top: var(--panel-top);
  width: calc((100% - var(--menu-width)) / 2);
  height: 100%;
  background-image: url(../img/bg-chairman.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.panel-ceo:before {
  content: ' ';
  display: block;
  position: absolute;
  left: var(--menu-width);
  top: var(--panel-top);
  width: calc((100% - var(--menu-width)) / 2);
  height: 100%;
  background-image: url(../img/bg-ceo.jpg);
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
}

/* invert logo */
.panel-downloads video {
  object-fit: contain;
  display: block;
  width: 100%;
  height: 100%;
}

.video-box video.mobile-only {
  background-image: url(../media/cover-mobile.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.content-area {
  transition: all 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.menu-toggle {
  display: none;
  width: var(--gap);
  height: calc(var(--gap)/2);
  position: relative;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--cgc-blue);
  left: 0;
  top: calc(50% - 1px);
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

body:not(.open-menu) .menu-toggle span:nth-child(1) {
  transform: translateY(calc(var(--gap18)/2*-1));
}

body:not(.open-menu) .menu-toggle span:nth-child(3) {
  transform: translateY(calc(var(--gap18)/2));
}

.open-menu .menu-toggle span:nth-child(1) {
  transform: rotate(45deg) translate(0, 0);
}

.open-menu .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.open-menu .menu-toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(0, 0);

}

.mobile-only {
  display: none !important;
}

/* More Animation */
.fp-overflow {
  overflow-x: hidden;
}

.panel-chairman .section-title img,
.panel-ceo .section-title img,
.panel-key-highlights .section-title img,
.panel-success-stories .section-title img,
.panel-material .section-title img,
.panel-5-years .section-title img,
.panel-sustain .section-title img,
.panel-downloads .section-title img,
.panel-leadership .section-title img,
.panel-governance .section-title img {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.6s ease-in-out;
  transition-delay: 400ms;
}

.panel-chairman.active .section-title img,
.panel-ceo.active .section-title img,
.panel-key-highlights.active .section-title img,
.panel-success-stories.active .section-title img,
.panel-material.active .section-title img,
.panel-5-years.active .section-title img,
.panel-sustain.active .section-title img,
.panel-downloads.active .section-title img,
.panel-leadership.active .section-title img,
.panel-governance.active .section-title img {
  opacity: 1;
  transform: translateX(0%);
}

.panel-chairman .panel-content-text .quote,
.panel-ceo .panel-content-text .quote {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.6s ease-in-out;
  transition-delay: 500ms;
  color: var(--cgc-black);
}

.panel-chairman.active .panel-content-text .quote,
.panel-ceo.active .panel-content-text .quote {
  opacity: 1;
  transform: translateX(0%);
}

.panel-chairman .panel-content-text .who,
.panel-ceo .panel-content-text .who {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.6s ease-in-out;
  transition-delay: 600ms;
  overflow: hidden;
}

.panel-chairman.active .panel-content-text .who,
.panel-ceo.active .panel-content-text .who {
  opacity: 1;
  transform: translateX(0%);
}

.section .btn-download {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.6s ease-in-out;
  transition-delay: 700ms;
  overflow: hidden;
}

.section.active .btn-download {
  opacity: 1;
  transform: translateX(0%);
}

.panel-chairman:before,
.panel-ceo:before {
  opacity: 0;
  transition: all 1s linear;
  transition-delay: 300ms;
}

.panel-chairman.active:before,
.panel-ceo.active:before {
  opacity: 1;
}

.charts .chart {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.6s ease-in-out;
  transition-delay: 100ms;
}

.charts .chart:nth-child(2) {
  transition-delay: 200ms;
}

.charts .chart:nth-child(3) {
  transition-delay: 300ms;
}

.charts .chart:nth-child(4) {
  transition-delay: 400ms;
}

.charts .chart:nth-child(5) {
  transition-delay: 500ms;
}

.charts .chart:nth-child(6) {
  transition-delay: 600ms;
}

.charts .chart:nth-child(7) {
  transition-delay: 700ms;
}

.active .charts .chart {
  opacity: 1;
  transform: translateX(0%);
}

.content-sustain .col .desc {
  opacity: 0;
  transform: translateX(20%);
  transition: all 1s ease-in-out;
  transition-delay: 1000ms;
}

.active .content-sustain .col .desc {
  opacity: 1;
  transform: translateX(0%);
}

.download-list li {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.6s ease-in-out;
  transition-delay: 600ms;
}

.panel-downloads2 .download-section .col .download-list {
  font-size: 1.15rem;
  line-height: 1.2em;
}

.panel-downloads2 .download-list li {
  margin: 0.4em 0;
}

.download-list li:nth-child(2) {
  transition-delay: 800ms;
}

.download-list li:nth-child(3) {
  transition-delay: 1000ms;
}

.download-list li:nth-child(4) {
  transition-delay: 1200ms;
}

.download-list li:nth-child(5) {
  transition-delay: 1400ms;
}

.download-list li:nth-child(6) {
  transition-delay: 1600ms;
}

.download-list li:nth-child(7) {
  transition-delay: 1800ms;
}

.download-lists .download-list li {
  transition: all 0.5s ease-in-out;
}

.download-lists .download-list:first-of-type li:nth-child(1) {
  transition-delay: 400ms;
}

.download-lists .download-list:first-of-type li:nth-child(2) {
  transition-delay: 500ms;
}

.download-lists .download-list:first-of-type li:nth-child(3) {
  transition-delay: 600ms;
}

.download-lists .download-list:first-of-type li:nth-child(4) {
  transition-delay: 700ms;
}

.download-lists .download-list:first-of-type li:nth-child(5) {
  transition-delay: 800ms;
}

.download-lists .download-list:first-of-type li:nth-child(6) {
  transition-delay: 900ms;
}

.download-lists .download-list:first-of-type li:nth-child(7) {
  transition-delay: 1000ms;
}

.download-lists .download-list:last-of-type li:nth-child(1) {
  transition-delay: 1100ms;
}

.download-lists .download-list:last-of-type li:nth-child(2) {
  transition-delay: 1200ms;
}

.download-lists .download-list:last-of-type li:nth-child(3) {
  transition-delay: 1300ms;
}

.download-lists .download-list:last-of-type li:nth-child(4) {
  transition-delay: 1400ms;
}

.download-lists .download-list:last-of-type li:nth-child(5) {
  transition-delay: 1500ms;
}

.download-lists .download-list:last-of-type li:nth-child(6) {
  transition-delay: 1600ms;
}

.active .download-list li {
  opacity: 1;
  transform: translateX(0%);
}

.fp-section {
  padding-left: var(--menu-width);
  padding-top: var(--panel-top);
}

.fp-bg {
  max-width: calc(100% - var(--menu-width));
}

.active .content-sustain .content-box .desc {
  opacity: 1;
  transform: translateX(0%);
}

.chart-sustain img.n1 {
  opacity: 0;
  transform: translateX(30%);
  transition: all 0.6s ease-in-out;
  transition-delay: 800ms;
}

.chart-sustain img:not(.n1) {
  opacity: 0;
  transform: translateX(30%);
  transition: all 0.6s ease-in-out;
  transition-delay: 1100ms;
}

.active .chart-sustain img {
  opacity: 1 !important;
  transform: translateX(0%) !important;
}

.panel-governance .subheading {
  text-align: center;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.3em;
  padding: 1em 0;
  color: #344D5E;
  background-color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--gap24);
  padding: var(--gap24);
}

.panel-governance {}

.principles-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap18);
  padding: var(--gap24);
  margin-top: var(--gap24);
  transition: all 400ms ease-in-out;
  background-color: transparent;
}

.principles-area .intro {
  font-size: 1.3rem;
  line-height: 1.3em;
  font-weight: bold;
  color: #ffffff;
}

.principles {
  display: flex;
  gap: var(--gap24);
}

.principles .principle {
  background-color: #ffffff;
  padding: var(--gap12);
  flex-basis: 100%;
}

.principles .principle .heading {
  color: #ffffff;
  background-color: var(--cgc-orange);
  padding: 0.5em 1em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.principles .principle .text {
  padding: 1em 1em 0 1em;
  font-size: 0.9rem;
  line-height: 1.3em;
  text-align: center;
}

.content-governance .content-box {
  max-width: 900px;
}

.content-governance,
.content-leadership {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: var(--gap24);
}

.content-leadership .subheading {
  font-weight: bold;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--cgc-orange);
  text-align: center;
}

.content-leadership {
  width: 100%;
  padding-left: var(--gap);
  padding-right: var(--gap);
}

.profiles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--gap);
  --profile-col: 3;
  padding: var(--gap18) 0;
}

.profiles .profile {
  width: 100%;
  flex-basis: calc((100% - ((var(--profile-col) - 1) * var(--gap))) / var(--profile-col));
  display: flex;
  gap: var(--gap24);
  cursor: pointer;
}

.profiles .profile.main {
  flex-basis: 100%;
  flex-direction: row;
  --profile-col: 4;
  justify-content: center;
}

.profiles .profile.main .profile-wrap {
  width: 100%;
  flex-basis: calc((100% - ((var(--profile-col) - 1) * var(--gap))) / var(--profile-col));
  display: flex;
  gap: var(--gap18);
  cursor: pointer;
}

.profiles .profile .thumb {
  overflow: hidden;
  flex-basis: 45%;
  transition: all 300ms ease-in-out;
  border-radius: var(--gap10);
  position: relative;
}

.profiles .profile .thumb img {
  display: block;
  margin: 0 auto;
  background-color: #ffffff;
  transition: all 400ms ease-in-out;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center top;
}

.profiles .profile:hover .thumb {
  transform: scale(1.05);
}

.profiles .profile:hover .thumb img {
  background-color: #ffffff;
}

.profiles .profile .info {
  flex-basis: 55%;
  padding-top: var(--gap);
}

.profiles .profile .info .name {
  font-weight: bold;
  border-radius: 1.2rem;
  line-height: 1.2em;
  margin-bottom: 0.3em;
  color: var(--cgc-orange);
}

.profiles .profile .info .position {
  font-size: 0.85rem;
  line-height: 1.3em;
  min-height: 2.6em;
  color: var(--color-black);
}

.profiles .profile .info .position span {
  display: block;
}

.content-leadership .divider {
  border-bottom: 1px dashed var(--cgc-gray);
}

.hidden-profiles {
  display: none;
}

.overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  padding: var(--gap);
  display: none;
}

.overlay.show {
  display: block;
}

.overlay .overlay-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.top-action {
  position: relative;
  z-index: 100000;
}

.top-action .close-popup {
  position: absolute;
  right: calc(var(--gap) * -1);
  top: calc(var(--gap) * -1);
  cursor: pointer;
}

.profile-popup {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: var(--gap);
  border-radius: var(--gap10);
  position: relative;
}

.overlay.story .profile-popup {
  max-width: 1080px;
}

.profile-popup-wrap {}

.profile-popup-wrap .profile-content {
  display: flex;
  gap: var(--gap);
}

.profile-popup-wrap .profile-content .profile-image {
  flex-basis: 40%;
  font-size: 0.8rem;
  line-height: 1.3em;
}

.overlay.story .profile-popup-wrap .profile-content .profile-image {
  flex-basis: 45%;
}

.profile-popup-wrap .profile-content .profile-image .image-box {
  position: relative;
  overflow: hidden;
}

.profile-popup-wrap .profile-content .profile-image .caption {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 1em;
  position: absolute;
  bottom: 0;
  right: 0;
}

.profile-popup-wrap .profile-content .profile-image .caption.left {
  right: auto;
  left: 0;
}

.profile-popup-wrap .profile-content .profile-image .caption .bold {
  font-weight: bold;
}

.profile-popup-wrap .profile-content .profile-image img {
  display: block;
  background-color: #ffffff;
  transition: all 600ms ease-in-out;
}

.profile-popup-wrap .profile-content .profile-text {
  flex-basis: 60%;
}

.overlay.story .profile-popup-wrap .profile-content .profile-text {
  flex-basis: 55%;
}

.profile-popup-wrap .profile-content .profile-text .profile-heading {
  padding: 0 0 1em;
}

.profile-popup-wrap .profile-content .profile-text .profile-heading .profile-title {
  font-weight: bold;
  font-size: 1.4rem;
  color: #35556F;
}

.profile-popup-wrap .profile-content .profile-text .profile-heading .profile-title img {
  display: block;
  height: 4rem;
}

.profile-popup-wrap .profile-content .profile-text .profile-heading .profile-title img.half {
  height: 3rem;
}

.profile-popup-wrap .profile-content .profile-text .profile-heading .profile-position {
  color: #ffffff;
  margin-top: 1em;
  padding: 0.8em 1em;
  background-color: var(--cgc-orange);
  font-size: 0.9rem;
  line-height: 1.3em;
  font-weight: bold;
  border-radius: var(--gap10);
}

.profile-popup-wrap .profile-content .profile-text .profile-heading .profile-position span {
  display: block;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio {
  overflow-y: auto;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section {
  padding: 1.5em 0;
  font-size: 0.9rem;
  line-height: 1.4em;
  border-bottom: 1px dotted var(--cgc-gray);
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section:first-child {
  padding-top: 0;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section:last-child,
.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section.last {
  padding-bottom: 0;
  border-bottom: 0;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section .heading {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section .quote {
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.3em;
  color: var(--cgc-light-blue);
  position: relative;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section .quote:before {
  content: ' ';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background: transparent url(../img/icon-open-quote.svg) center center/contain no-repeat;
  margin-top: -0.2em;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section .quote:after {
  content: ' ';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background: transparent url(../img/icon-close-quote.svg) right center/contain no-repeat;
  align-self: end;
  transform: translateY(0.2em);
  margin-left: 0.2em;
}

.overlay.story .profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section .heading {
  color: var(--cgc-blue);
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section .text {}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-top: 1em;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section p {
  margin-top: 1em;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section ul:first-child {
  margin-top: 0;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section p:first-child {
  margin-top: 0;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta {
  width: 100%;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta th,
.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta td {
  padding: 0.3em 1em;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta th {
  text-align: left;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta td {
  font-weight: bold;
  text-align: left;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta td p {
  font-weight: normal;
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta tr:nth-child(odd)>* {
  background-color: var(--cgc-bg-gray);
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section table.meta tr:nth-child(even):last-of-type>* {
  border-bottom: 2px solid var(--cgc-bg-gray);
}

.profile-popup-wrap .profile-content .profile-text .profile-bio .bio-section.declaration {
  background-color: var(--cgc-light-orange2);
  padding: var(--gap18);
  font-size: 0.8rem;
  line-height: 1.4em;
  margin-top: var(--gap24);
  border-radius: var(--gap10);
}

.profile-popup .top-action .close-popup {
  display: block;
  width: var(--gap48);
  height: var(--gap48);
  text-indent: -999px;
  overflow: hidden;
  background: transparent url(../img/icon-close.svg) center center/50% 50% no-repeat;
}

/* Governance animation */
.content-governance .content-box .subheading {
  opacity: 0;
  transform: translateX(-50%);
  transition: all 600ms ease-in-out;
  transition-delay: 800ms;
}

.active .content-governance .content-box .subheading {
  opacity: 1;
  transform: translateX(0%);
}

.content-governance .content-box .desc {
  opacity: 0;
  transform: translateX(50%);
  transition: all 600ms ease-in-out;
  transition-delay: 1200ms;
}

.active .content-governance .content-box .desc {
  opacity: 1;
  transform: translateX(0%);
}

.content-governance .content-box .intro {
  opacity: 0;
  transform: translateY(50%);
  transition: all 600ms ease-in-out;
  transition-delay: 1600ms;
}

.active .content-governance .content-box .intro {
  opacity: 1;
  transform: translateY(0%);
}

.content-governance .content-box .principles .principle {
  opacity: 0;
  transform: translateY(50%);
  transition: all 600ms ease-in-out;
  transition-delay: 1800ms;
}

.content-governance .content-box .principles .principle:nth-child(2) {
  transition-delay: 2200ms;
}

.content-governance .content-box .principles .principle:nth-child(3) {
  transition-delay: 2600ms;
}

.active .principles-area {
  background-color: var(--cgc-blue);
}

.active .content-governance .content-box .principles .principle {
  opacity: 1;
  transform: translateY(0%);
}

.panel-downloads .panel-content-box .panel-content-inner {
  padding: 0px;
}

.section.panel-key-highlights .fp-bg {
  background: var(--cgc-gradient) !important;
}

.section.panel-material .fp-bg {
  background: var(--cgc-gradient2) !important;
}

.section.panel-5-years .fp-bg {
  background: var(--cgc-gradient3) !important;
}

.section.panel-sustain .fp-bg {
  background: var(--cgc-gradient4) !important;
}

.section.panel-success-stories .fp-bg {
  background: var(--cgc-gradient) !important;
}

.section.panel-governance .fp-bg {
  background: var(--cgc-gradient) !important;
}

.tabs {
  max-width: 1280px;
  margin: 0 auto;
}

.tabs .tab-nav {
  text-align: center;
}

.tabs .tab-nav ul {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: var(--gap);
}

.tabs .tab-nav ul li {}

.tabs .tab-nav ul li a {
  display: block;
  padding: 0;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--cgc-orange);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 300ms ease-in-out;
}

.tabs .tab-nav ul li a.active {
  color: var(--cgc-blue);
}

.tabs .tab-contents {
  position: relative;
  overflow: hidden;
  margin-top: var(--gap18);
}

.tabs .tab-contents .tab-content {
  transition: all 600ms ease-in-out;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 var(--gap);
}

.tabs .tab-contents .tab-content:not(.active) {
  position: absolute;
  z-index: 1;
  opacity: 0;
}

.tabs .tab-contents .tab-content.active {
  position: relative;
  z-index: 10;
}

.fp-section:not(.active) .tabs .tab-contents {
  visibility: hidden;
}

.viewport {
  position: fixed;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 10px;
  line-height: 1em;
  padding: 0.1em 0.5em;
  left: 0;
  bottom: 0;
}
.viewport2 {
  position: fixed;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 10px;
  line-height: 1em;
  padding: 0.1em 0.5em;
  right: 0;
  bottom: 0;
}