/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.row-number-1 {
  max-width:1400px;
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
  margin: 0 auto;
}

.row-number-27 {
  max-width:1200px;
  border-radius: 3rem;
  margin: 0 auto;
}



.single-chart {
  justify-content: space-around;
  position: relative;
}

.single-chart h4 {
  position: absolute;
  top: 50%;
  left: 50%;
      transform: translate(-50%, -50%);
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-height: 200px;
}

.circle-bg {
  fill: none;
  stroke: #3103a2;
  stroke-width: 1px;
}

.single-chart h4, .single-chart span {
  font-size: 3rem !important;
}

.circle {
  fill: none;
  stroke-width: 4;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart .circle {
  stroke: #e5b364;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

@media (max-width:981px) {
  .h1 {
    font-size: 2.5rem !important;
  }
  h2 {
    font-size: 2rem;
  }
  h3, h3 > span {
    font-size: 3rem !important;
  }
  .container-fluid .dnd-section {
    padding: 30px 15px !important;
}