@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
.igFrameBar {
  width: 810px;
  height: 200px;
  position: relative;
  background: #f2f2f2;
  margin: 15% auto 0px auto;
  transform: translate(0, -50%);
}

.igFrameBar:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
}

.igFrameBar:after {
  content: "";
  width: 100%;
  height: 50%;
  background: transparent;
  position: absolute;
  top: 25%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.igData {
  width: 20px;
  position: absolute;
  bottom: 1px;
  margin: 0px 0px 0px 0px;
  z-index: 99;
  float: left;
}

.igData1 {
  background: #9baec8;
  height: 0px;
  left: 26.3636363636px;
  -webkit-animation: showBar1 1.2s 0.1s forwards;
  -moz-animation: showBar1 1.2s 0.1s forwards;
  animation: showBar1 1.2s 0.1s forwards;
}

.igData2 {
  background: #d9e1e8;
  height: 0px;
  left: 100.7272727273px;
  -webkit-animation: showBar2 1.2s 0.2s forwards;
  -moz-animation: showBar2 1.2s 0.2s forwards;
  animation: showBar2 1.2s 0.2s forwards;
}

.igData3 {
  background: #2b90d9;
  height: 0px;
  left: 180.0909090909px;
  -webkit-animation: showBar3 1.2s 0.3s forwards;
  -moz-animation: showBar3 1.2s 0.3s forwards;
  animation: showBar3 1.2s 0.3s forwards;
}

.igData4 {
  background: #8ec0e4;
  height: 0px;
  left: 250.4545454545px;
  -webkit-animation: showBar4 1.2s 0.4s forwards;
  -moz-animation: showBar4 1.2s 0.4s forwards;
  animation: showBar4 1.2s 0.4s forwards;
}

.igData5 {
  background: #cadbe9;
  height: 0px;
  left: 330.8181818182px;
  -webkit-animation: showBar5 1.2s 0.5s forwards;
  -moz-animation: showBar5 1.2s 0.5s forwards;
  animation: showBar5 1.2s 0.5s forwards;
}

.igData6 {
  background: #6aafe6;
  height: 0px;
  left: 400.1818181818px;
  -webkit-animation: showBar6 1.2s 0.6s forwards;
  -moz-animation: showBar6 1.2s 0.6s forwards;
  animation: showBar6 1.2s 0.6s forwards;
}

.igData7 {
  background: #d6ecfa;
  height: 0px;
  left: 480.5454545455px;
  -webkit-animation: showBar7 1.2s 0.7s forwards;
  -moz-animation: showBar7 1.2s 0.7s forwards;
  animation: showBar7 1.2s 0.7s forwards;
}

.igData8 {
  background: #a5dff9;
  height: 0px;
  left: 555.9090909091px;
  -webkit-animation: showBar8 1.2s 0.8s forwards;
  -moz-animation: showBar8 1.2s 0.8s forwards;
  animation: showBar8 1.2s 0.8s forwards;
}

.igData9 {
  background: #dae9f4;
  height: 0px;
  left: 630.2727272727px;
  -webkit-animation: showBar9 1.2s 0.9s forwards;
  -moz-animation: showBar9 1.2s 0.9s forwards;
  animation: showBar9 1.2s 0.9s forwards;
}

.igData10 {
  background: #d3e0f7;
  height: 0px;
  left: 700.6363636364px;
  -webkit-animation: showBar10 1.2s 1s forwards;
  -moz-animation: showBar10 1.2s 1s forwards;
  animation: showBar10 1.2s 1s forwards;
}

.igData11 {
  background: #2b90d9;
  height: 0px;
  left: 767.2727272727px;
  -webkit-animation: showBar11 1.2s 1.1s forwards;
  -moz-animation: showBar11 1.2s 1.1s forwards;
  animation: showBar11 1.2s 1.1s forwards;
}


.igData:before {
  position: absolute;
  top: -16px;
  font-size: 12px;
  color: #333;
  font-family: "roboto";
  font-weight: 300;
}

.igData1:before {
  content: "43,97%";
}

.igData2:before {
  content: "40,09%";
}

.igData3:before {
  content: "39,54%";
}

.igData4:before {
  content: "38,57%";
}

.igData5:before {
  content: "36,59%";
}

.igData6:before {
  content: "36,76%";
}

.igData7:before {
  content: "33,57%";
}

.igData8:before {
  content: "31,69%";
}

.igData9:before {
  content: "33,28%";
}

.igData10:before {
  content: "31,33%";
}

.igData11:before {
  content: "34,37%";
}

.igData:after {
  position: absolute;
  bottom: -55px;
  transform: rotate(30deg);
  color: #666;
  font-size: 14px;
  text-align: left;
  font-family: "roboto";
  font-weight: 300;
  width: 150px;
}

.igData1:after {
  content: "Oltenia";
}

.igData2:after {
  content: "Muntenia";
}

.igData3:after {
  content: "Dobrogea";
}

.igData4:after {
  content: "Transilvania";
}

.igData5:after {
  content: "Moldova";
}

.igData6:after {
  content: "Buc - Sector 1";
}

.igData7:after {
  content: "Buc - Sector 2";
}

.igData8:after {
  content: "Buc - Sector 3";
}

.igData9:after {
  content: "Buc - Sector 4";
}

.igData10:after {
  content: "Buc - Sector 5";
}

.igData11:after {
  content: "Buc - Sector 6";
}




@-webkit-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 43,97%;
  }
}
@-webkit-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 40,09%;
  }
}
@-webkit-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 39,57%;
  }
}
@-webkit-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 38,57%;
  }
}
@-webkit-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 36,59%;
  }
}
@-webkit-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 36,76%;
  }
}
@-webkit-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 33,57%;
  }
}
@-webkit-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 31,69%;
  }
}
@-webkit-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 33,28%;
  }
}
@-webkit-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 31,33%;
  }
}
@-webkit-keyframes showBar11 {
  0% {
    height: 0px;
  }
  100% {
    height: 34,37%;
  }
}



@-moz-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 43,97%;
  }
}
@-moz-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 40,09%;
  }
}
@-moz-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 39,57%;
  }
}
@-moz-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 38,57%;
  }
}
@-moz-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 36,59%;
  }
}
@-moz-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 36,76%;
  }
}
@-moz-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 33,57%;
  }
}
@-moz-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 31,69%;
  }
}
@-moz-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 33,28%;
  }
}
@-moz-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 31,33%;
  }
}
@-moz-keyframes showBar11 {
  0% {
    height: 0px;
  }
  100% {
    height: 34,37%;
  }
}




@keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 43%;
  }
}
@keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 39%;
  }
}
@keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 38%;
  }
}
@keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 33%;
  }
}
@keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 31%;
  }
}
@keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 33%;
  }
}
@keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 31%;
  }
}
@keyframes showBar11 {
  0% {
    height: 0px;
  }
  100% {
    height: 34%;
  }
}