.circle {
  width: 100px;
  height: 100px;
  margin: 110px 310px;
  text-align: center;
  opacity: 0.7;
  overflow: hidden;
  border-radius: 90%;
}

.circle2 {
  width: 100px;
  height: 100px;
  margin: 57px 310px;
  text-align: center;
  opacity: 0.7;
  overflow: hidden;
  border-radius: 90%;
}

#graph {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 70px;
  margin: 25px -11px;
}

#graph div {
  position: absolute;
  bottom: 16px;
  width: 9px;
  height: 10px;
  background: #fff;
}

#graph div:nth-child(n+1) {
  height:16px;
  left: 24px;
  
  animation: chartIt 2s 1 ease-in-out 0s;
  -webkit-animation: chartIt 2s 1 ease-in-out 0s;
}

#graph div:nth-child(n+2) {
  height:26px;
  left: 37px;
  
  animation: chartIt 2s 1 ease-in-out .25s;
  -webkit-animation: chartIt 2s 1 ease-in-out .25s;
}

#graph div:nth-child(n+3) {
  height:42px;
  left: 50px;
  
  animation: chartIt 2s 1 ease-in-out .5s;
  -webkit-animation: chartIt 2s 1 ease-in-out .5s;
}

#graph div:nth-child(n+4) {
  height:37px;
  left: 63px;
  
  animation: chartIt 2s 1 ease-in-out .75s;
  -webkit-animation: chartIt 2s 1 ease-in-out .75s;
}

#graph div:nth-child(n+5) {
  height:50px;
  left: 76px;
  
  animation: chartIt 2s 1 ease-in-out 1s;
  -webkit-animation: chartIt 2s 1 ease-in-out 1s;
}

#graph div:nth-child(n+6) {
  height:60px;
  left: 89px;
  
  animation: chartIt 2s 1 ease-in-out 1.25s;
  -webkit-animation: chartIt 2s 1 ease-in-out 1.25s;
}

@keyframes chartIt {
  0% { max-height:60px; }
  50% { max-height:0px; }
  100% { max-height:60px; }
}

@-webkit-keyframes chartIt {
  0% { max-height:60px; }
  50% { max-height:0px; }
  100% { max-height:60px; }
}