.item {
  position: relative;
  float: left;
}

  .item h2 {
    text-align: center;
    position: absolute;
    line-height: 125px;
    width: 100%;
  }


.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation {

  animation: htmlll 1.0s forwards;
  
}



@keyframes htmlll {
  to {
    stroke-dashoffset: 330;
  }

}



.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation {

  animation: htmlll 1.0s forwards;
  
}



@keyframes htmlll {
  to {
    stroke-dashoffset: 330;
  }

}




.circle_animation0 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation0 {
  animation: html0 1.0s forwards;
}



@keyframes html0 {
  to {
    stroke-dashoffset: 440;
  }
}




.circle_animation1 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation1 {
  animation: html1 1.0s forwards;
}



@keyframes html1 {
  to {
    stroke-dashoffset: 385;
  }
}






.circle_animation2 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation2 {
  animation: html2 1.0s forwards;
}



@keyframes html2 {
  to {
    stroke-dashoffset: 330;
  }
}





.circle_animation3 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation3 {
  animation: html3 1.0s forwards;
}



@keyframes html3 {
  to {
    stroke-dashoffset: 275;
  }
}






.circle_animation4 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation4 {
  animation: html4 1.0s forwards;
}



@keyframes html4 {
  to {
    stroke-dashoffset: 220;
  }
}


.circle_animation5 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation5 {
  animation: html5 1.0s forwards;
}



@keyframes html5 {
  to {
    stroke-dashoffset: 165;
  }
}



.circle_animation6 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation6 {
  animation: html6 1.0s forwards;
}



@keyframes html6 {
  to {
    stroke-dashoffset: 110;
  }
}




.circle_animation7 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation7 {
  animation: html7 1.0s forwards;
}



@keyframes html7 {
  to {
    stroke-dashoffset: 55;
  }
}





.circle_animation8 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation8 {
  animation: html8 1.0s forwards;
}



@keyframes html8 {
  to {
    stroke-dashoffset: 0;
  }
}










































.circle_animation8 {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation8 {
  animation: htmll 1.0s forwards;
}



@keyframes htmll {
  to {
    stroke-dashoffset: 0;
  }
}