/* Global */
.window {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 0;
  background-image: url('../../images/progress-bar-1.jpg');
  height: 993px;
}
.progressbar {
  padding: 20px;
}
.description {
  padding: 20px;
  border: 20px solid #EEEEEE;
  min-width: auto;
}

/* Progress Circle Bar */
.circle-chart {
  width: 160px;
  height: 160px;
  padding-bottom: 10px;
}
.circle-chart__circle {
  stroke: #00acc1;
  stroke-width: 2;
  stroke-linecap: square;
  fill: none;
  animation: circle-chart-fill 2s reverse; /* 1 */
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}
.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}
.circle-chart__background {
  stroke: #efefef;
  stroke-width: 2;
  fill: none;
}
.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}
.circle-chart__percent {
  alignment-baseline: central;
  text-anchor: middle;
  font-size: 8px;
}
.circle-chart__subline {
    alignment-baseline: central;
    text-anchor: middle;
    font-size: 3px;
}
.success-stroke {
  stroke: #00C851;
}
.warning-stroke {
  stroke: #ffbb33;
}
.danger-stroke {
  stroke: #ff4444;
}
@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}
@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Description */
.guide h2 {
  font-weight: 400;
}
.item-divider {
  margin: 2rem 0; /* Space out the Bootstrap <hr> more */
}
.item-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}
/* -- RESPONSIVE CSS -- */
@media (min-width: 40em) {
  .item-heading {
    font-size: 50px;
  }
}
@media (min-width: 62em) {
  .item-heading {
    margin-top: 0;
  }
}