/* ================  CHART ON HOME PAGE ====================== */
.donut-chart {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.donut-chart .slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.donut-chart .chart-center {
  position: absolute;
  border-radius: 50%;
}
.donut-chart .chart-center span {
  display: block;
  text-align: center;
}
/*CHART 1 red*/
.donut-chart.chartred {
  width: 160px;
  height: 160px;
  background: #e1e1e1;
}
.donut-chart.chartred .slice.one {
  clip: rect(0 200px 100px 0);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  /*background: #FF0F17;*/
  background: #e1e1e1;
}
.donut-chart.chartred .slice.two {
  clip: rect(0 100px 200px 0);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  /*background: #FF0F17;*/
  background: #e1e1e1;
}
.donut-chart.chartred .chart-center {
top: 10px;
left: 10px;
width: 140px;
height: 140px;
background: #fff;
}
.donut-chart.chartred .chart-center span {
font-size: 40px;
line-height: 140px;
color: #FF0F17;
}
.donut-chart.chartred .chart-center span:after {
content: "";
}
/*CHART 2 - blue*/
.donut-chart.mediumchartblue {
width: 120px;
height: 120px;
background: #123A65;
}
.donut-chart.mediumchartblue .slice.one {
clip: rect(0 120px 60px 0);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background: #123A65;
}
.donut-chart.mediumchartblue .slice.two {
  clip: rect(0 60px 120px 0);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  background: #123A65;
}
.donut-chart.mediumchartblue .chart-center {
  top: 5px;
  left: 5px;
  width: 110px;
  height: 110px;
  background: #fff;
}
.donut-chart.mediumchartblue .chart-center span {
  font-size: 24px;
  line-height: 110px;
  color: #123A65;
}
.donut-chart.mediumchartblue .chart-center span:after {
  content: "";
}

/*CHART 2.9 MEDIUM - blue*/
.donut-chart.chartbluecorpus {
width: 150px;
height: 150px;
background: #123A65;
}
.donut-chart.chartbluecorpus .slice.one {
clip: rect(0 150px 75px 0);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background: #123A65;
}
.donut-chart.chartbluecorpus .slice.two {
  clip: rect(0 75px 150px 0);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  background: #123A65;
}
.donut-chart.chartbluecorpus .chart-center {
  top: 5px;
  left: 5px;
  width: 140px;
  height: 140px;
  background: #fff;
}
.donut-chart.chartbluecorpus .chart-center span {
  font-size: 28px;
  line-height: 140px;
  color: #123A65;
}
.donut-chart.chartbluecorpus .chart-center span:after {
  content: "";
}
/*CHART 2.5 SMALL - blue*/
.donut-chart.smallchartblue {
width: 76px;
height: 76px;
background: #123A65;
}
.donut-chart.smallchartblue .slice.one {
clip: rect(0 76px 38px 0);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background: #123A65;
}
.donut-chart.smallchartblue .slice.two {
  clip: rect(0 38px 76px 0);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  background: #123A65;
}
.donut-chart.smallchartblue .chart-center {
  top: 4px;
  left: 4px;
  width: 68px;
  height: 68px;
  background: #fff;
}
.donut-chart.smallchartblue .chart-center span {
  font-size: 18px;
  font-weight: 400;
  line-height: 68px;
  color: #123A65;
}
.donut-chart.smallchartblue .chart-center span:after {
  content: "";
}
/*------------------------------*/
/*CHART 1 blue timeline section*/
.donut-chart.chartblue {
  width: 160px;
  height: 160px;
  background: #e1e1e1;
}
.donut-chart.chartblue .slice.one {
  clip: rect(0 200px 100px 0);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  /*background: #FF0F17;*/
  background: #e1e1e1;
}
.donut-chart.chartblue .slice.two {
  clip: rect(0 100px 200px 0);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  /*background: #FF0F17;*/
  background: #e1e1e1;
}
.donut-chart.chartblue .chart-center {
top: 10px;
left: 10px;
width: 140px;
height: 140px;
background: #fff;
}
.donut-chart.chartblue .chart-center span {
font-size: 40px;
line-height: 140px;
color: #123A65;
}
.donut-chart.chartblue .chart-center span:after {
content: "";
}
/*--------------------------*/
/*CHART 3 - green*/
.donut-chart.chartgreen {
  width: 160px;
  height: 160px;
  background: #e1e1e1;
}
.donut-chart.chartgreen .slice.one {
  clip: rect(0 200px 100px 0);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  /*background: #2DB60E;*/
  background: #e1e1e1;
}
.donut-chart.chartgreen .slice.two {
  clip: rect(0 100px 200px 0);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  /*background: #2DB60E;*/
  background: #e1e1e1;
}
.donut-chart.chartgreen .chart-center {
  top: 10px;
  left: 10px;
  width: 140px;
  height: 140px;
  background: #fff;
}
.donut-chart.chartgreen .chart-center span {
  font-size: 40px;
  line-height: 140px;
  color: #2DB60E;
}
.donut-chart.chartgreen .chart-center span:after {
  content: "";
}
/*CHART 4 - yellow*/
.donut-chart.chartyellow {
  width: 160px;
  height: 160px;
  background: #e1e1e1;
}
.donut-chart.chartyellow .slice.one {
  clip: rect(0 200px 100px 0);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  /*background: #FAA919;*/
  background: #e1e1e1;
}
.donut-chart.chartyellow .slice.two {
  clip: rect(0 100px 200px 0);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  /*background: #FAA919;*/
  background: #e1e1e1;
}
.donut-chart.chartyellow .chart-center {
  top: 10px;
  left: 10px;
  width: 140px;
  height: 140px;
  background: #fff;
}
.donut-chart.chartyellow .chart-center span {
  font-size: 40px;
  line-height: 140px;
  color: #FAA919;
}
.donut-chart.chartyellow .chart-center span:after {
  content: "";
}