.animated-diagram {
  position: relative; }
  @media (min-width: 800px) {
    .animated-diagram .animated-paragraph {
      position: relative; } }
  @media (max-width: 800px) {
    .animated-diagram .animated-paragraph h4 {
      position: relative; } }
  .animated-diagram .animated-paragraph span {
    transition: opacity 0.2s; }
  .animated-diagram .animated-paragraph a {
    transition: opacity 0.5s;
    transition-delay: 0.125s; }
  .animated-diagram .animated-paragraph h4 span {
    opacity: 0; }
    .animated-diagram .animated-paragraph h4 span[visible] {
      opacity: 1; }
  @media (min-width: 800px) {
    .animated-diagram .animated-paragraph p span,
    .animated-diagram .animated-paragraph a {
      opacity: 0; }
      .animated-diagram .animated-paragraph p span[visible],
      .animated-diagram .animated-paragraph a[visible] {
        opacity: 1; } }
  .animated-diagram .canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    mix-blend-mode: difference; }