.section-reveal h1{
    opacity: 0;
    transform: translateX(-20px);
    transition: all .5s ease-out;
    transition-delay: .25s;
}

.section-reveal.reveal h1{
    opacity: 1;
    transform: translateX(0px);
}
.section-reveal h3{
    opacity: 0;
    transform: translateX(-20px);
    transition: all .5s ease-out;
    transition-delay: .5s;
}

.section-reveal.reveal h3{
    opacity: 1;
    transform: translateX(0px);
}
.section-reveal h4{
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all .5s ease-out;
    transition-delay: .5s;
}

.section-reveal.reveal h4{
    opacity: 1;
}

.Disciplines__image-block{
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s ease-out;
    transition-delay: .25s;
}
.section-reveal.reveal .Disciplines__image-block{
    opacity: 1;
    transform: translateY(0px);
}

/* animated radials */
.radial-progress {
    --size: 320px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 20px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
    
  }
  
  .reveal .radial-progress-referral{
    /* -webkit-animation: progress-animation 2s ease-out .5s 1 forwards; */
    /* animation: progress-animation 2s ease-out .5s 1 forwards; */
  }
  .reveal .radial-progress-repeat{
    /* -webkit-animation: progress-animation2 2s ease-out .5s 1 forwards; */
    /* animation: progress-animation2 2s ease-out .5s 1 forwards; */
  }
  
  .radial-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: butt;
  }
  
  .radial-progress circle.bg {
    stroke: #f06219db;
  }

  
  .radial-progress circle.fg {
    opacity:0;
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray .3s linear 0s;
    stroke: #FFFFFF;
    
  }
  .reveal .radial-progress circle.fg{
    opacity: 1;
  }
  
  @-webkit-property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }
  @property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }
  
  @-webkit-keyframes progress-animation {
    from {
      --progress: 0;
    }
    to {
      --progress: 63;
    }
  }
  @keyframes progress-animation {
    from {
      --progress: 0;
    }
    to {
      --progress: 63;
    }
  }

  @-webkit-keyframes progress-animation2 {
    from {
      --progress: 0;
    }
    to {
      --progress: 82;
    }
  }
  @keyframes progress-animation2 {
    from {
      --progress: 0;
    }
    to {
      --progress: 82;
    }
  }

  .graph{
    position: relative;
    max-width: 320px;
  }
  .graph h1{
    margin-top: 0px;
  }
  .graph h4{
    font-family: 'Gilroy Bold', 'Arial', 'Helvetica', 'Verdana', sans-serif;
    font-size: 88px;
    color: rgb(190, 64, 38);
    position: absolute;
    left: 50%;
    top: 50%;
  }
  .graph h4.percentage-referral{
    left: 46%;
  }
  .graph h4.percentage-repeat{
    left: 54%;
  }

  .mission_column h1{
    margin-top: -10px;
  }

  @property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }

  /* animation: progress-animation 2s ease-out .5s 1 forwards; */
  
  .reveal .percentage-referral {
    /* -webkit-animation: counter 3.0s forwards alternate ease-in-out; */
    /* animation: counter 3.0s forwards alternate ease-in-out; */
    counter-reset: num var(--num);
    padding: 2rem;
  }
  .percentage-referral::before {
    content: counter(num);
    position: absolute;
  }
  .percentage-referral::after {
    content: '%';
    margin-left: 92px;
  }

  .reveal .percentage-repeat {
    /* -webkit-animation: counter2 3.0s forwards alternate ease-in-out; */
    /* animation: counter2 3.0s forwards alternate ease-in-out; */
    counter-reset: num var(--num);
    padding: 2rem;
  }
  .percentage-repeat::before {
    content: counter(num);
    position: absolute;
  }
  .percentage-repeat::after {
    content: '%';
    margin-left: 92px;
  }
  
  
  @keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 63;
    }
  }
  @keyframes counter2 {
    from {
      --num: 0;
    }
    to {
      --num: 82;
    }
  }


/* ******************************** */

.circular-pbar{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: conic-gradient(#ffffff var(--p, 0), 0, #f06219db);
    
    --p: 0;
}
.circular-pbar span{
    font-size: 88px;
    z-index: 1;
    color: rgb(190, 64, 38);
    font-family: 'Gilroy Bold', 'Arial', 'Helvetica', 'Verdana', sans-serif;
}
.circular-pbar:after{
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background-color: #FF6C0E;
    border-radius: 50%;
    content: "";
}
.graph.graph1{
    margin-right: 40px;
}




  /* overrides */
.Mission .Mission__row {
    /* justify-content: space-between; */
}
.Mission .Mission__column.col-1{
    padding: 0;
    padding-right: 50px;
}

@media only screen and (max-width: 1100px) {
.graph h4{
    font-size: 42px;
}
.graph svg{
    max-height: 165px;
}
.percentage-referral::after {
    margin-left: 46px;
}

.percentage-repeat::after {
    margin-left: 46px;
}
.graph h4.percentage-referral{
/* left: 46%; */
}
.graph h4.percentage-repeat{
    left: 56%;
}

/*****/
.circular-pbar{
    width: 145px;
    height: 145px;
}
.circular-pbar:after{
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}
.circular-pbar span{
    font-size: 42px;
}

}

@media only screen and (max-width: 760px) {
.graph h4{
    font-size: 40px;
}
.mission_column h1{
    margin-top: 0;
}
.graph h4.percentage-referral{
    left: 50%;
    top: 59%;
}
.percentage-referral::after {
    margin-left: 42px;
}

.graph h4.percentage-repeat{
    left: 51%;
    top: 59%;
}
.percentage-repeat::after{
    margin-left: 43px;
}

/*****/
.Mission__column.col-1{
    margin-bottom: 30px;
}
.circular-pbar{
    width: 135px;
    height: 135px;
}
.circular-pbar:after{
    width: calc(100% - 15px);
    height: calc(100% - 15px);
}
.circular-pbar span{
    font-size: 40px;
}
}


@media only screen and (max-width: 389px) {

.Mission .Mission__row{
    flex-direction: column;
}
.graph.graph1{
    margin-right: 0;
    margin-bottom: 30px;
}

}