.arrow {
  border: 3px solid transparent;
  height: 0;
  margin:0;
  width: 0;
}

.arrow.down {
  border-bottom: none;
  border-top-color: #c7c7c7;
}
.arrow.up {
    border-bottom-color: #c7c7c7;
    border-top: none;
}
/*** RADIAL PROGRESS ***/
/* Circumference = 2πr */
/* π = 3.1415926535898 */
/* r = 35 */

svg.radial-progress {
  height: auto;
  max-width: 100%;
  padding: 0;
  transform: rotate(-90deg);
  width: 100%;
}

svg.radial-progress circle {
  fill: rgba(0,0,0,0);
  stroke: #e3e3e3;
  stroke-dashoffset: 219.91148575129; /* Circumference */
  stroke-width: 2;
}

svg.radial-progress circle.incomplete { opacity: 0.25; stroke: #e3e3e3; }

svg.radial-progress circle.complete { stroke-dasharray: 219.91148575129; /* Circumference */ stroke: #d81c20;}

svg.radial-progress text {
  fill: #1a1d22;
  font: 500 16px/35px 'Rajdhani', sans-serif;
  text-anchor: middle;
}

/*** COLORS ***/
/* Primary */

/*svg.radial-progress:nth-of-type(6n+1) circle { stroke: #d81c20; }*/

/* Secondary */

svg.radial-progress:nth-of-type(6n+2) circle { stroke: #83e4e2; }

/* Tertiary */

svg.radial-progress:nth-of-type(6n+3) circle { stroke: #fd6470; }

/* Quaternary */

svg.radial-progress:nth-of-type(6n+4) circle { stroke: #fca858; }

/* Quinary */

svg.radial-progress:nth-of-type(6n+5) circle { stroke: #fddc32; }