/**
  * Flags
  */
  .has-flag-black,
  .has-flag-white,
  .has-flag-blue,
  .has-flag-blue-light,
  .has-flag-green,
  .has-flag-lime,
  .has-flag-orange,
  .has-flag-orange-light,
  .has-flag-pink,
  .has-flag-purple,
  .has-flag-red {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  .has-flag-black.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Black.svg'); }
  .has-flag-purple.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Purple.svg'); }
  .has-flag-white.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-White.svg'); }
  .has-flag-blue.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Blue.svg'); }
  .has-flag-blue-light.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-LightBlue.svg'); }
  .has-flag-green.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Green.svg'); }
  .has-flag-lime.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Lime.svg'); }
  .has-flag-orange.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Orange.svg'); }
  .has-flag-orange-light.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-LightOrange.svg'); }
  .has-flag-pink.flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Pink.svg'); }
  .has-flag-red .flag-shape-circle { background-image: url('../../img/flags/Flag-Circle-Red.svg'); }
  
  .has-flag-black.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Black.svg'); }
  .has-flag-purple.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Purple.svg'); }
  .has-flag-white.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-White.svg'); }
  .has-flag-blue.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Blue.svg'); }
  .has-flag-blue-light.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-LightBlue.svg'); }
  .has-flag-green.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Green.svg'); }
  .has-flag-lime.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Lime.svg'); }
  .has-flag-orange.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Orange.svg'); }
  .has-flag-orange-light.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-LightOrange.svg'); }
  .has-flag-pink.flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Pink.svg'); }
  .has-flag-red .flag-shape-arrow { background-image: url('../../img/flags/Flag-Arrow-Red.svg'); }
  
  .has-flag-black.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Black.svg'); }
  .has-flag-purple.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Purple.svg'); }
  .has-flag-white.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-White.svg'); }
  .has-flag-blue.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Blue.svg'); }
  .has-flag-blue-light.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-LightBlue.svg'); }
  .has-flag-green.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Green.svg'); }
  .has-flag-lime.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Lime.svg'); }
  .has-flag-orange.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Orange.svg'); }
  .has-flag-orange-light.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-LightOrange.svg'); }
  .has-flag-pink.flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Pink.svg'); }
  .has-flag-red .flag-shape-stripe { background-image: url('../../img/flags/Flag-Stripe-Red.svg'); }
  
  .has-flag-black.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Black.svg'); }
  .has-flag-purple.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Purple.svg'); }
  .has-flag-white.flag-shape-line { background-image: url('../../img/flags/Flag-Line-White.svg'); }
  .has-flag-blue.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Blue.svg'); }
  .has-flag-blue-light.flag-shape-line { background-image: url('../../img/flags/Flag-Line-LightBlue.svg'); }
  .has-flag-green.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Green.svg'); }
  .has-flag-lime.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Lime.svg'); }
  .has-flag-orange.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Orange.svg'); }
  .has-flag-orange-light.flag-shape-line { background-image: url('../../img/flags/Flag-Line-LightOrange.svg'); }
  .has-flag-pink.flag-shape-line { background-image: url('../../img/flags/Flag-Line-Pink.svg'); }
  .has-flag-red .flag-shape-line { background-image: url('../../img/flags/Flag-Line-Red.svg'); }
  
  .has-flag-strip-mono,
  .has-flag-strip {
      position: relative;
      margin-bottom: -1px;
  }
  .has-flag-strip:after,
  .has-flag-strip-mono:after {
      margin-top: auto;
      padding-top: var(--gutter);
      content: url('../../img/flags/StripLine.svg');
      max-width: 100%;
      overflow: hidden;
      width: 100%;
      display: block;
      height: 68px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  .has-flag-strip-mono:after {
      content: url('../../img/flags/StripMono.svg');
  }
  section.row.has-flag-strip-mono, section.row.has-flag-strip {
      padding-bottom: calc(var(--gutter) * 5);
  }
  
  /* Header flags */
  /* BEFORE - left side */
  .before__has-flag-black.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Black.svg'); }
  .before__has-flag-purple.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Purple.svg'); }
  .before__has-flag-white.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-White.svg'); }
  .before__has-flag-blue.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Blue.svg'); }
  .before__has-flag-blue-light.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-LightBlue.svg'); }
  .before__has-flag-green.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Green.svg'); }
  .before__has-flag-lime.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Lime.svg'); }
  .before__has-flag-orange.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Orange.svg'); }
  .before__has-flag-orange-light.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-LightOrange.svg'); }

  .before__has-flag-pink.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Pink.svg'); }
  .before__has-flag-red.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Red.svg'); }
  
  .before__has-flag-black.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Black.svg'); }
  .before__has-flag-purple.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Purple.svg'); }
  .before__has-flag-white.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-White.svg'); }
  .before__has-flag-blue.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Blue.svg'); }
  .before__has-flag-blue-light.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-LightBlue.svg'); }
  .before__has-flag-green.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Green.svg'); }
  .before__has-flag-lime.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Lime.svg'); }
  .before__has-flag-orange.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Orange.svg'); }
  .before__has-flag-orange-light.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-LightOrange.svg'); }

  .before__has-flag-pink.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Pink.svg'); }
  .before__has-flag-red.before__flag-shape-arrow > .flex-container:before { background-image: url('../../img/flags/Flag-Arrow-Red.svg'); }
  
  .before__has-flag-black.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Black.svg'); }
  .before__has-flag-purple.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Purple.svg'); }
  .before__has-flag-white.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-White.svg'); }
  .before__has-flag-blue.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Blue.svg'); }
  .before__has-flag-blue-light.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-LightBlue.svg'); }
  .before__has-flag-green.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Green.svg'); }
  .before__has-flag-lime.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Lime.svg'); }
  .before__has-flag-orange.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Orange.svg'); }
  .before__has-flag-orange-light.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-LightOrange.svg'); }

  .before__has-flag-pink.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Pink.svg'); }
  .before__has-flag-red.before__flag-shape-stripe > .flex-container:before { background-image: url('../../img/flags/Flag-Stripe-Red.svg'); }
  
  .before__has-flag-black.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Black.svg'); }
  .before__has-flag-purple.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Purple.svg'); }
  .before__has-flag-white.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-White.svg'); }
  .before__has-flag-blue.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Blue.svg'); }
  .before__has-flag-blue-light.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-LightBlue.svg'); }
  .before__has-flag-green.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Green.svg'); }
  .before__has-flag-lime.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Lime.svg'); }
  .before__has-flag-orange.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Orange.svg'); }
  .before__has-flag-orange-light.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-LightOrange.svg'); }

  .before__has-flag-pink.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Pink.svg'); }
  .before__has-flag-red.before__flag-shape-line > .flex-container:before { background-image: url('../../img/flags/Flag-Line-Red.svg'); }
  
  .before__has-flag-black.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Black.svg'); }
  .before__has-flag-purple.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Purple.svg'); }
  .before__has-flag-white.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-White.svg'); }
  .before__has-flag-blue.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Blue.svg'); }
  .before__has-flag-blue-light.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-LightBlue.svg'); }
  .before__has-flag-green.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Green.svg'); }
  .before__has-flag-lime.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Lime.svg'); }
  .before__has-flag-orange.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Orange.svg'); }
  .before__has-flag-orange-light.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-LightOrange.svg'); }

  .before__has-flag-pink.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Pink.svg'); }
  .before__has-flag-red.before__flag-shape-circle > .flex-container:before { background-image: url('../../img/flags/Flag-Circle-Red.svg'); }
  
  /* AFTER - right side */
  .after__has-flag-black.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Black.svg'); }
  .after__has-flag-purple.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Purple.svg'); }
  .after__has-flag-white.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-White.svg'); }
  .after__has-flag-blue.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Blue.svg'); }
  .after__has-flag-blue-light.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-LightBlue.svg'); }
  .after__has-flag-green.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Green.svg'); }
  .after__has-flag-lime.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Lime.svg'); }
  .after__has-flag-orange.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Orange.svg'); }
  .after__has-flag-orange-light.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-LightOrange.svg'); }

  .after__has-flag-pink.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Pink.svg'); }
  .after__has-flag-red.after__flag-shape-circle > .flex-container:after { background-image: url('../../img/flags/Flag-Circle-Red.svg'); }
  
  .after__has-flag-black.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Black.svg'); }
  .after__has-flag-purple.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Purple.svg'); }
  .after__has-flag-white.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-White.svg'); }
  .after__has-flag-blue.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Blue.svg'); }
  .after__has-flag-blue-light.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-LightBlue.svg'); }
  .after__has-flag-green.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Green.svg'); }
  .after__has-flag-lime.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Lime.svg'); }
  .after__has-flag-orange.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Orange.svg'); }
  .after__has-flag-orange-light.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-LightOrange.svg'); }

  .after__has-flag-pink.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Pink.svg'); }
  .after__has-flag-red.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Red.svg'); }
  
  .after__has-flag-black.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Black.svg'); }
  .after__has-flag-purple.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Purple.svg'); }
  .after__has-flag-white.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-White.svg'); }
  .after__has-flag-blue.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Blue.svg'); }
  .after__has-flag-blue-light.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-LightBlue.svg'); }
  .after__has-flag-green.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Green.svg'); }
  .after__has-flag-lime.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Lime.svg'); }
  .after__has-flag-orange.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Orange.svg'); }
  .after__has-flag-orange-light.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-LightOrange.svg'); }

  .after__has-flag-pink.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Pink.svg'); }
  .after__has-flag-red.after__flag-shape-arrow > .flex-container:after { background-image: url('../../img/flags/Flag-Arrow-Red.svg'); }
  
  .after__has-flag-black.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Black.svg'); }
  .after__has-flag-purple.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Purple.svg'); }
  .after__has-flag-white.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-White.svg'); }
  .after__has-flag-blue.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Blue.svg'); }
  .after__has-flag-blue-light.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-LightBlue.svg'); }
  .after__has-flag-green.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Green.svg'); }
  .after__has-flag-lime.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Lime.svg'); }
  .after__has-flag-orange.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Orange.svg'); }
  .after__has-flag-orange-light.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-LightOrange.svg'); }

  .after__has-flag-pink.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Pink.svg'); }
  .after__has-flag-red.after__flag-shape-stripe > .flex-container:after { background-image: url('../../img/flags/Flag-Stripe-Red.svg'); }
  
  .after__has-flag-black.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Black.svg'); }
  .after__has-flag-purple.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Purple.svg'); }
  .after__has-flag-white.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-White.svg'); }
  .after__has-flag-blue.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Blue.svg'); }
  .after__has-flag-blue-light.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-LightBlue.svg'); }
  .after__has-flag-green.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Green.svg'); }
  .after__has-flag-lime.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Lime.svg'); }
  .after__has-flag-orange.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Orange.svg'); }
  .after__has-flag-orange-light.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-LightOrange.svg'); }

  .after__has-flag-pink.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Pink.svg'); }
  .after__has-flag-red.after__flag-shape-line > .flex-container:after { background-image: url('../../img/flags/Flag-Line-Red.svg'); }
  
  /**
  * Circles
  */

.has-bg-circle {
    position: relative;
}
.has-bg-circle > * {
    position: relative;
    z-index: 2;
}
.has-bg-circle + h1, .has-bg-circle + h2, .has-bg-circle + h3, .has-bg-circle + h4, .has-bg-circle + h5 {
    position: relative;
    z-index: 2;
}
.img-wrap.has-bg-circle {
    margin-bottom: 2.5rem;
}
.has-bg-circle:after {
    content: '';
    background-color: transparent;
    border-radius: 100%;
    display: block;
    width: 125%;
    padding-top: 125%;
    position: absolute;
    z-index: 1;
    top: 20%;
    left: -12.5%;
    /*transition: all 200ms ease;*/
}
.col:hover .has-bg-circle:after {
    -webkit-animation: color-change-3x 150ms ease 1 alternate both;
    animation: color-change-3x 150ms ease 1 alternate both;

    --color-mid : var(--blue-light);
    --color-end : var(--white);
}

.has-bg-circle.has-white-circle:after { background-color: var(--white); --color-start : var(--white); }
.has-bg-circle.has-tan-circle:after { background-color: var(--tan); --color-start : var(--tan); }
.has-bg-circle.has-yellow-circle:after { background-color: var(--yellow); --color-start : var(--yellow); }
.has-bg-circle.has-off-black-circle:after { background-color: var(--off-black); --color-start : var(--off-black); }
.has-bg-circle.has-blue-circle:after { background-color: var(--blue); --color-start : var(--blue); }
.has-bg-circle.has-blue-light-circle:after { background-color: var(--blue-light); --color-start : var(--blue-light); --color-mid : var(--green-light); }
.has-bg-circle.has-green-circle:after { background-color: var(--green); --color-start : var(--green); }
.has-bg-circle.has-green-light-circle:after { background-color: var(--green-light); --color-start : var(--green-light); }
.has-bg-circle.has-red-circle:after { background-color: var(--red); --color-start : var(--red); }
.has-bg-circle.has-orange-circle:after { background-color: var(--orange); --color-start : var(--orange); }
.has-bg-circle.has-orange-light-circle:after { background-color: var(--orange-light); --color-start : var(--orange-light); }
.has-bg-circle.has-purple-circle:after { background-color: var(--purple); --color-start : var(--purple); }
.has-bg-circle.has-pink-circle:after { background-color: var(--pink); --color-start : var(--pink); }

/*

    -webkit-animation: color-change-3x 150ms linear 1 alternate both;
    animation: color-change-3x 150ms linear 1 alternate both;
*/
  @-webkit-keyframes color-change-3x {
    0% {
      background: var(--color-start);
    }
    50% {
      background: var(--color-mid);
    }
    100% {
      background: var(--color-end);
    }
  }
  @keyframes color-change-3x {
    0% {
      background: var(--color-start);
    }
    50% {
      background: var(--color-mid);
    }
    100% {
      background: var(--color-end);
    }
  }