.company-stats-number {
  display: block;
  }

@media only screen and (min-width: 35em) { /* wide screen */

  {# starting values before animation #}
  .counter-default { display: none; }
  .company-stats-number { color: var(--brand-gray_20); }

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

  .go.company-stats-number { animation: color_change 1s ease-in forwards; }
  .go.company-stats-text { animation: fadein 1s ease-in forwards; }
  .go.corporate-stats-header { animation: fadein .5s ease-in forwards; }

  span.go.counter.counter-employees { animation: counter 5s ease-in-out forwards; counter-reset: num var(--num); }
  span.go.counter.counter-employees { --num: 55 }

  span.go.counter.counter-locations { animation: counter 6.5s ease-in-out forwards; counter-reset: num var(--num); }
  span.go.counter.counter-locations { --num: 7 }

  span.go.counter.counter-experience { animation: counter 4s ease-in-out forwards; counter-reset: num var(--num); }
  span.go.counter.counter-experience { --num: 20 }

  span.counter::after { 
    content: counter(num); 
    }

  @keyframes counter {
    from {
      --num: 0;
    }
  }

  @keyframes fadein { 
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

}