.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: -2;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
  
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.bar0::after{
  max-width: 0%;
  background: #FF8080;
}
.bar1::after{
  max-width: 1%;
  background: #FF8080;
}
.bar2::after{
  max-width: 2%;
  background: #FF8080;
}
.bar3::after{
  max-width: 3%;
  background: #FF8080;
}
.bar4::after{
  max-width: 4%;
  background: #FF8080;
}
.bar5::after{
  max-width: 5%;
  background: #FF8080;
}
.bar6::after{
  max-width: 6%;
  background: #FF8080;
}
.bar7::after{
  max-width: 7%;
  background: #FF8080;
}
.bar8::after{
  max-width: 8%;
  background: #FF8080;
}
.bar9::after{
  max-width: 9%;
  background: #FF8080;
}
.bar10::after{
  max-width: 10%;
  background: #FF8080;
}
.bar11::after{
  max-width: 11%;
  background: #FF8080;
}
.bar12::after{
  max-width: 12%;
  background: #FF8080;
}
.bar13::after{
  max-width: 13%;
  background: #FF8080;
}
.bar14::after{
  max-width: 14%;
  background: #FF8080;
}
.bar15::after{
  max-width: 15%;
  background: #FF8080;
}
.bar16::after{
  max-width: 16%;
  background: #FF8080;
}
.bar17::after{
  max-width: 17%;
  background: #FF8080;
}
.bar18::after{
  max-width: 18%;
  background: #FF8080;
}
.bar19::after{
  max-width: 19%;
  background: #FF8080;
}
.bar20::after{
  max-width: 20%;
  background: #FF8080;
}
.bar21::after{
  max-width: 21%;
  background: #FF8080;
}
.bar22::after{
  max-width: 22%;
  background: #FF8080;
}
.bar23::after{
  max-width: 23%;
  background: #FF8080;
}
.bar24::after{
  max-width: 24%;
  background: #FF8080;
}
.bar25::after{
  max-width: 25%;
  background: #FF8080;
}
.bar26::after{
  max-width: 26%;
  background: #FF8080;
}
.bar27::after{
  max-width: 27%;
  background: #FF8080;
}
.bar28::after{
  max-width: 28%;
  background: #FF8080;
}
.bar29::after{
  max-width: 29%;
  background: #FF8080;
}
.bar30::after{
  max-width: 30%;
  background: #FF8080;
}
.bar31::after{
  max-width: 31%;
  background: #FF8080;
}
.bar32::after{
  max-width: 32%;
  background: #FF8080;
}
.bar33::after{
  max-width: 33%;
  background: #FF8080;
}
.bar34::after{
  max-width: 34%;
  background: #FF8080;
}
.bar35::after{
  max-width: 35%;
  background: #FF8080;
}
.bar36::after{
  max-width: 36%;
  background: #FF8080;
}
.bar37::after{
  max-width: 37%;
  background: #FF8080;
}
.bar38::after{
  max-width: 38%;
  background: #FF8080;
}
.bar39::after{
  max-width: 39%;
  background: #FF8080;
}
.bar40::after{
  max-width: 40%;
  background: #FF8080;
}
.bar41::after{
  max-width: 41%;
  background: #FF8080;
}
.bar42::after{
  max-width: 42%;
  background: #FF8080;
}
.bar43::after{
  max-width: 43%;
  background: #FF8080;
}
.bar44::after{
  max-width: 44%;
  background: #FF8080;
}
.bar45::after{
  max-width: 45%;
  background: #FF8080;
}
.bar46::after{
  max-width: 46%;
  background: #FF8080;
}
.bar47::after{
  max-width: 47%;
  background: #FF8080;
}
.bar48::after{
  max-width: 48%;
  background: #FF8080;
}
.bar49::after{
  max-width: 49%;
  background: #FF8080;
}
.bar50::after{
  max-width: 50%;
  background: #FFA280;
}
.bar51::after{
  max-width: 51%;
  background: #FFA280;
}
.bar52::after{
  max-width: 52%;
  background: #FFA280;
}
.bar53::after{
  max-width: 53%;
  background: #FFA280;
}
.bar54::after{
  max-width: 54%;
  background: #FFA280;
}
.bar55::after{
  max-width: 55%;
  background: #FDEB80;
}
.bar56::after{
  max-width: 56%;
  background: #FDEB80;
}
.bar57::after{
  max-width: 57%;
  background: #FDEB80;
}
.bar58::after{
  max-width: 58%;
  background: #FDEB80;
}
.bar59::after{
  max-width: 59%;
  background: #FDEB80;
}
.bar60::after{
  max-width: 60%;
  background: #FDEB80;
}
.bar61::after{
  max-width: 61%;
  background: #FDEB80;
}
.bar62::after{
  max-width: 62%;
  background: #FDEB80;
}
.bar63::after{
  max-width: 63%;
  background: #FDEB80;
}
.bar64::after{
  max-width: 64%;
  background: #FDEB80;
}
.bar65::after{
  max-width: 65%;
  background: #A4CF84;
}
.bar66::after{
  max-width: 66%;
  background: #A4CF84;
}
.bar67::after{
  max-width: 67%;
  background: #A4CF84;
}
.bar68::after{
  max-width: 68%;
  background: #A4CF84;
}
.bar69::after{
  max-width: 69%;
  background: #A4CF84;
}
.bar70::after{
  max-width: 70%;
  background: #A4CF84;
}
.bar71::after{
  max-width: 71%;
  background: #A4CF84;
}
.bar72::after{
  max-width: 72%;
  background: #A4CF84;
}
.bar73::after{
  max-width: 73%;
  background: #A4CF84;
}
.bar74::after{
  max-width: 74%;
  background: #A4CF84;
}
.bar75::after{
  max-width: 75%;
  background: #A4CF84;
}
.bar76::after{
  max-width: 76%;
  background: #A4CF84;
}
.bar77::after{
  max-width: 77%;
  background: #A4CF84;
}
.bar78::after{
  max-width: 78%;
  background: #A4CF84;
}
.bar79::after{
  max-width: 79%;
  background: #A4CF84;
}
.bar80::after{
  max-width: 80%;
  background: #80BB87;
}
.bar81::after{
  max-width: 81%;
  background: #80BB87;
}
.bar82::after{
  max-width: 82%;
  background: #80BB87;
}
.bar83::after{
  max-width: 83%;
  background: #80BB87;
}
.bar84::after{
  max-width: 84%;
  background: #80BB87;
}
.bar85::after{
  max-width: 85%;
  background: #80BB87;
}
.bar86::after{
  max-width: 86%;
  background: #80BB87;
}
.bar87::after{
  max-width: 87%;
  background: #80BB87;
}
.bar88::after{
  max-width: 88%;
  background: #80BB87;
}
.bar89::after{
  max-width: 89%;
  background: #80BB87;
}
.bar90::after{
  max-width: 90%;
  background: #80BB87;
}
.bar91::after{
  max-width: 91%;
  background: #80BB87;
}
.bar92::after{
  max-width: 92%;
  background: #80BB87;
}
.bar93::after{
  max-width: 93%;
  background: #80BB87;
}
.bar94::after{
  max-width: 94%;
  background: #80BB87;
}
.bar95::after{
  max-width: 95%;
  background: #80BB87;
}
.bar96::after{
  max-width: 96%;
  background: #80BB87;
}
.bar97::after{
  max-width: 97%;
  background: #80BB87;
}
.bar98::after{
  max-width: 98%;
  background: #80BB87;
}
.bar99::after{
  max-width: 99%;
  background: #80BB87;
}
.bar100::after{
  max-width: 100%;
  background: #80BB87;
}

.ptr{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.ptr::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: -2;
  background: #ecf0f1;
}
.ptr::after{
  content: '';

  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: ptr-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
  
@-webkit-keyframes ptr-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.ptr0::after{
  max-width: 0%;
  background: #FF8080;
}
.ptr1::after{
  max-width: 1%;
  background: #FF8080;
}
.ptr2::after{
  max-width: 2%;
  background: #FF8080;
}
.ptr3::after{
  max-width: 3%;
  background: #FF8080;
}
.ptr4::after{
  max-width: 4%;
  background: #FF8080;
}
.ptr5::after{
  max-width: 5%;
  background: #FF8080;
}
.ptr6::after{
  max-width: 6%;
  background: #FF8080;
}
.ptr7::after{
  max-width: 7%;
  background: #FF8080;
}
.ptr8::after{
  max-width: 8%;
  background: #FF8080;
}
.ptr9::after{
  max-width: 9%;
  background: #FF8080;
}
.ptr10::after{
  max-width: 10%;
  background: #FF8080;
}
.ptr11::after{
  max-width: 11%;
  background: #FF8080;
}
.ptr12::after{
  max-width: 12%;
  background: #FF8080;
}
.ptr13::after{
  max-width: 13%;
  background: #FF8080;
}
.ptr14::after{
  max-width: 14%;
  background: #FF8080;
}
.ptr15::after{
  max-width: 15%;
  background: #FF8080;
}
.ptr16::after{
  max-width: 16%;
  background: #FF8080;
}
.ptr17::after{
  max-width: 17%;
  background: #FF8080;
}
.ptr18::after{
  max-width: 18%;
  background: #FF8080;
}
.ptr19::after{
  max-width: 19%;
  background: #FF8080;
}
.ptr20::after{
  max-width: 20%;
  background: #FF8080;
}
.ptr21::after{
  max-width: 21%;
  background: #FF8080;
}
.ptr22::after{
  max-width: 22%;
  background: #FF8080;
}
.ptr23::after{
  max-width: 23%;
  background: #FF8080;
}
.ptr24::after{
  max-width: 24%;
  background: #FF8080;
}
.ptr25::after{
  max-width: 25%;
  background: #FF8080;
}
.ptr26::after{
  max-width: 26%;
  background: #FF8080;
}
.ptr27::after{
  max-width: 27%;
  background: #FF8080;
}
.ptr28::after{
  max-width: 28%;
  background: #FF8080;
}
.ptr29::after{
  max-width: 29%;
  background: #FF8080;
}
.ptr30::after{
  max-width: 30%;
  background: #FF8080;
}
.ptr31::after{
  max-width: 31%;
  background: #FF8080;
}
.ptr32::after{
  max-width: 32%;
  background: #FF8080;
}
.ptr33::after{
  max-width: 33%;
  background: #FF8080;
}
.ptr34::after{
  max-width: 34%;
  background: #FF8080;
}
.ptr35::after{
  max-width: 35%;
  background: #FF8080;
}
.ptr36::after{
  max-width: 36%;
  background: #FF8080;
}
.ptr37::after{
  max-width: 37%;
  background: #FF8080;
}
.ptr38::after{
  max-width: 38%;
  background: #FF8080;
}
.ptr39::after{
  max-width: 39%;
  background: #FF8080;
}
.ptr40::after{
  max-width: 40%;
  background: #FF8080;
}
.ptr41::after{
  max-width: 41%;
  background: #FF8080;
}
.ptr42::after{
  max-width: 42%;
  background: #FF8080;
}
.ptr43::after{
  max-width: 43%;
  background: #FF8080;
}
.ptr44::after{
  max-width: 44%;
  background: #FF8080;
}
.ptr45::after{
  max-width: 45%;
  background: #FF8080;
}
.ptr46::after{
  max-width: 46%;
  background: #FF8080;
}
.ptr47::after{
  max-width: 47%;
  background: #FF8080;
}
.ptr48::after{
  max-width: 48%;
  background: #FF8080;
}
.ptr49::after{
  max-width: 49%;
  background: #FF8080;
}
.ptr50::after{
  max-width: 50%;
  background: #FF8080;
}
.ptr51::after{
  max-width: 51%;
  background: #FF8080;
}
.ptr52::after{
  max-width: 52%;
  background: #FF8080;
}
.ptr53::after{
  max-width: 53%;
  background: #FF8080;
}
.ptr54::after{
  max-width: 54%;
  background: #FF8080;
}
.ptr55::after{
  max-width: 55%;
  background: #FF8080;
}
.ptr56::after{
  max-width: 56%;
  background: #FF8080;
}
.ptr57::after{
  max-width: 57%;
  background: #FF8080;
}
.ptr58::after{
  max-width: 58%;
  background: #FF8080;
}
.ptr59::after{
  max-width: 59%;
  background: #FF8080;
}
.ptr60::after{
  max-width: 60%;
  background: #FF8080;
}
.ptr61::after{
  max-width: 61%;
  background: #FF8080;
}
.ptr62::after{
  max-width: 62%;
  background: #FF8080;
}
.ptr63::after{
  max-width: 63%;
  background: #FF8080;
}
.ptr64::after{
  max-width: 64%;
  background: #FF8080;
}
.ptr65::after{
  max-width: 65%;
  background: #FF8080;
}
.ptr66::after{
  max-width: 66%;
  background: #FF8080;
}
.ptr67::after{
  max-width: 67%;
  background: #FF8080;
}
.ptr68::after{
  max-width: 68%;
  background: #FF8080;
}
.ptr69::after{
  max-width: 69%;
  background: #FF8080;
}
.ptr70::after{
  max-width: 70%;
  background: #FFA280;
}
.ptr71::after{
  max-width: 71%;
  background: #FFA280;
}
.ptr72::after{
  max-width: 72%;
  background: #FFA280;
}
.ptr73::after{
  max-width: 73%;
  background: #FFA280;
}
.ptr74::after{
  max-width: 74%;
  background: #FFA280;
}
.ptr75::after{
  max-width: 75%;
  background: #FFA280;
}
.ptr76::after{
  max-width: 76%;
  background: #FFA280;
}
.ptr77::after{
  max-width: 77%;
  background: #FFA280;
}
.ptr78::after{
  max-width: 78%;
  background: #FFA280;
}
.ptr79::after{
  max-width: 79%;
  background: #FFA280;
}
.ptr80::after{
  max-width: 80%;
  background: #FDEB80;
}
.ptr81::after{
  max-width: 81%;
  background: #FDEB80;
}
.ptr82::after{
  max-width: 82%;
  background: #FDEB80;
}
.ptr83::after{
  max-width: 83%;
  background: #FDEB80;
}
.ptr84::after{
  max-width: 84%;
  background: #FDEB80;
}
.ptr85::after{
  max-width: 85%;
  background: #FDEB80;
}
.ptr86::after{
  max-width: 86%;
  background: #FDEB80;
}
.ptr87::after{
  max-width: 87%;
  background: #FDEB80;
}
.ptr88::after{
  max-width: 88%;
  background: #FDEB80;
}
.ptr89::after{
  max-width: 89%;
  background: #FDEB80;
}
.ptr90::after{
  max-width: 90%;
  background: #A4CF84;
}
.ptr91::after{
  max-width: 91%;
  background: #A4CF84;
}
.ptr92::after{
  max-width: 92%;
  background: #A4CF84;
}
.ptr93::after{
  max-width: 93%;
  background: #A4CF84;
}
.ptr94::after{
  max-width: 94%;
  background: #A4CF84;
}
.ptr95::after{
  max-width: 95%;
  background: #80BB87;
}
.ptr96::after{
  max-width: 96%;
  background: #80BB87;
}
.ptr97::after{
  max-width: 97%;
  background: #80BB87;
}
.ptr98::after{
  max-width: 98%;
  background: #80BB87;
}
.ptr99::after{
  max-width: 99%;
  background: #80BB87;
}
.ptr100::after{
  max-width: 100%;
  background: #80BB87;
}

.pro{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.pro::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: -2;
  background: #ecf0f1;
}
.pro::after{
  content: '';

  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: pro-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
  
@-webkit-keyframes pro-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.pro0::after{
  max-width: 0%;
  background: #FF8080;
}
.pro1::after{
  max-width: 1%;
  background: #FF8080;
}
.pro2::after{
  max-width: 2%;
  background: #FF8080;
}
.pro3::after{
  max-width: 3%;
  background: #FF8080;
}
.pro4::after{
  max-width: 4%;
  background: #FF8080;
}
.pro5::after{
  max-width: 5%;
  background: #FFA280;
}
.pro6::after{
  max-width: 6%;
  background: #FFA280;
}
.pro7::after{
  max-width: 7%;
  background: #FFA280;
}
.pro8::after{
  max-width: 8%;
  background: #FFA280;
}
.pro9::after{
  max-width: 9%;
  background: #FFA280;
}
.pro10::after{
  max-width: 10%;
  background: #FFA280;
}
.pro11::after{
  max-width: 11%;
  background: #FFA280;
}
.pro12::after{
  max-width: 12%;
  background: #FFA280;
}
.pro13::after{
  max-width: 13%;
  background: #FFA280;
}
.pro14::after{
  max-width: 14%;
  background: #FFA280;
}
.pro15::after{
  max-width: 15%;
  background: #FDEB80;
}
.pro16::after{
  max-width: 16%;
  background: #FDEB80;
}
.pro17::after{
  max-width: 17%;
  background: #FDEB80;
}
.pro18::after{
  max-width: 18%;
  background: #FDEB80;
}
.pro19::after{
  max-width: 19%;
  background: #FDEB80;
}
.pro20::after{
  max-width: 20%;
  background: #FDEB80;
}
.pro21::after{
  max-width: 21%;
  background: #FDEB80;
}
.pro22::after{
  max-width: 22%;
  background: #FDEB80;
}
.pro23::after{
  max-width: 23%;
  background: #FDEB80;
}
.pro24::after{
  max-width: 24%;
  background: #FDEB80;
}
.pro25::after{
  max-width: 25%;
  background: #FDEB80;
}
.pro26::after{
  max-width: 26%;
  background: #FDEB80;
}
.pro27::after{
  max-width: 27%;
  background: #FDEB80;
}
.pro28::after{
  max-width: 28%;
  background: #FDEB80;
}
.pro29::after{
  max-width: 29%;
  background: #FDEB80;
}
.pro30::after{
  max-width: 30%;
  background: #A4CF84;
}
.pro31::after{
  max-width: 31%;
  background: #A4CF84;
}
.pro32::after{
  max-width: 32%;
  background: #A4CF84;
}
.pro33::after{
  max-width: 33%;
  background: #A4CF84;
}
.pro34::after{
  max-width: 34%;
  background: #A4CF84;
}
.pro35::after{
  max-width: 35%;
  background: #A4CF84;
}
.pro36::after{
  max-width: 36%;
  background: #A4CF84;
}
.pro37::after{
  max-width: 37%;
  background: #A4CF84;
}
.pro38::after{
  max-width: 38%;
  background: #A4CF84;
}
.pro39::after{
  max-width: 39%;
  background: #A4CF84;
}
.pro40::after{
  max-width: 40%;
  background: #A4CF84;
}
.pro41::after{
  max-width: 41%;
  background: #A4CF84;
}
.pro42::after{
  max-width: 42%;
  background: #A4CF84;
}
.pro43::after{
  max-width: 43%;
  background: #A4CF84;
}
.pro44::after{
  max-width: 44%;
  background: #A4CF84;
}
.pro45::after{
  max-width: 45%;
  background: #A4CF84;
}
.pro46::after{
  max-width: 46%;
  background: #A4CF84;
}
.pro47::after{
  max-width: 47%;
  background: #A4CF84;
}
.pro48::after{
  max-width: 48%;
  background: #A4CF84;
}
.pro49::after{
  max-width: 49%;
  background: #A4CF84;
}
.pro50::after{
  max-width: 50%;
  background: #80BB87;
}
.pro51::after{
  max-width: 51%;
  background: #80BB87;
}
.pro52::after{
  max-width: 52%;
  background: #80BB87;
}
.pro53::after{
  max-width: 53%;
  background: #80BB87;
}
.pro54::after{
  max-width: 54%;
  background: #80BB87;
}
.pro55::after{
  max-width: 55%;
  background: #80BB87;
}
.pro56::after{
  max-width: 56%;
  background: #80BB87;
}
.pro57::after{
  max-width: 57%;
  background: #80BB87;
}
.pro58::after{
  max-width: 58%;
  background: #80BB87;
}
.pro59::after{
  max-width: 59%;
  background: #80BB87;
}
.pro60::after{
  max-width: 60%;
  background: #80BB87;
}
.pro61::after{
  max-width: 61%;
  background: #80BB87;
}
.pro62::after{
  max-width: 62%;
  background: #80BB87;
}
.pro63::after{
  max-width: 63%;
  background: #80BB87;
}
.pro64::after{
  max-width: 64%;
  background: #80BB87;
}
.pro65::after{
  max-width: 65%;
  background: #80BB87;
}
.pro66::after{
  max-width: 66%;
  background: #80BB87;
}
.pro67::after{
  max-width: 67%;
  background: #80BB87;
}
.pro68::after{
  max-width: 68%;
  background: #80BB87;
}
.pro69::after{
  max-width: 69%;
  background: #80BB87;
}
.pro70::after{
  max-width: 70%;
  background: #80BB87;
}
.pro71::after{
  max-width: 71%;
  background: #80BB87;
}
.pro72::after{
  max-width: 72%;
  background: #80BB87;
}
.pro73::after{
  max-width: 73%;
  background: #80BB87;
}
.pro74::after{
  max-width: 74%;
  background: #80BB87;
}
.pro75::after{
  max-width: 75%;
  background: #80BB87;
}
.pro76::after{
  max-width: 76%;
  background: #80BB87;
}
.pro77::after{
  max-width: 77%;
  background: #80BB87;
}
.pro78::after{
  max-width: 78%;
  background: #80BB87;
}
.pro79::after{
  max-width: 79%;
  background: #80BB87;
}
.pro80::after{
  max-width: 80%;
  background: #80BB87;
}
.pro81::after{
  max-width: 81%;
  background: #80BB87;
}
.pro82::after{
  max-width: 82%;
  background: #80BB87;
}
.pro83::after{
  max-width: 83%;
  background: #80BB87;
}
.pro84::after{
  max-width: 84%;
  background: #80BB87;
}
.pro85::after{
  max-width: 85%;
  background: #80BB87;
}
.pro86::after{
  max-width: 86%;
  background: #80BB87;
}
.pro87::after{
  max-width: 87%;
  background: #80BB87;
}
.pro88::after{
  max-width: 88%;
  background: #80BB87;
}
.pro89::after{
  max-width: 89%;
  background: #80BB87;
}
.pro90::after{
  max-width: 90%;
  background: #80BB87;
}
.pro91::after{
  max-width: 91%;
  background: #80BB87;
}
.pro92::after{
  max-width: 92%;
  background: #80BB87;
}
.pro93::after{
  max-width: 93%;
  background: #80BB87;
}
.pro94::after{
  max-width: 94%;
  background: #80BB87;
}
.pro95::after{
  max-width: 95%;
  background: #80BB87;
}
.pro96::after{
  max-width: 96%;
  background: #80BB87;
}
.pro97::after{
  max-width: 97%;
  background: #80BB87;
}
.pro98::after{
  max-width: 98%;
  background: #80BB87;
}
.pro99::after{
  max-width: 99%;
  background: #80BB87;
}
.pro100::after{
  max-width: 100%;
  background: #80BB87;
}


.rap{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}

.rap::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: -2;
  background: #ecf0f1;
}
.rap::after{
  content: '';

  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: rap-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
  
@-webkit-keyframes rap-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.rap0::after{
  max-width: 0%;
  background: #FF8080;
}
.rap1::after{
  max-width: 1%;
  background: #FF8080;
}
.rap2::after{
  max-width: 2%;
  background: #FF8080;
}
.rap3::after{
  max-width: 3%;
  background: #FF8080;
}
.rap4::after{
  max-width: 4%;
  background: #FF8080;
}
.rap5::after{
  max-width: 5%;
  background: #FF8080;
}
.rap6::after{
  max-width: 6%;
  background: #FF8080;
}
.rap7::after{
  max-width: 7%;
  background: #FF8080;
}
.rap8::after{
  max-width: 8%;
  background: #FF8080;
}
.rap9::after{
  max-width: 9%;
  background: #FF8080;
}
.rap10::after{
  max-width: 10%;
  background: #FF8080;
}
.rap11::after{
  max-width: 11%;
  background: #FF8080;
}
.rap12::after{
  max-width: 12%;
  background: #FF8080;
}
.rap13::after{
  max-width: 13%;
  background: #FF8080;
}
.rap14::after{
  max-width: 14%;
  background: #FF8080;
}
.rap15::after{
  max-width: 15%;
  background: #FF8080;
}
.rap16::after{
  max-width: 16%;
  background: #FF8080;
}
.rap17::after{
  max-width: 17%;
  background: #FF8080;
}
.rap18::after{
  max-width: 18%;
  background: #FF8080;
}
.rap19::after{
  max-width: 19%;
  background: #FF8080;
}
.rap20::after{
  max-width: 20%;
  background: #FF8080;
}
.rap21::after{
  max-width: 21%;
  background: #FF8080;
}
.rap22::after{
  max-width: 22%;
  background: #FF8080;
}
.rap23::after{
  max-width: 23%;
  background: #FF8080;
}
.rap24::after{
  max-width: 24%;
  background: #FF8080;
}
.rap25::after{
  max-width: 25%;
  background: #FFA280;
}
.rap26::after{
  max-width: 26%;
  background: #FFA280;
}
.rap27::after{
  max-width: 27%;
  background: #FFA280;
}
.rap28::after{
  max-width: 28%;
  background: #FFA280;
}
.rap29::after{
  max-width: 29%;
  background: #FFA280;
}
.rap30::after{
  max-width: 30%;
  background: #FFA280;
}
.rap31::after{
  max-width: 31%;
  background: #FFA280;
}
.rap32::after{
  max-width: 32%;
  background: #FFA280;
}
.rap33::after{
  max-width: 33%;
  background: #FFA280;
}
.rap34::after{
  max-width: 34%;
  background: #FFA280;
}
.rap35::after{
  max-width: 35%;
  background: #FFA280;
}
.rap36::after{
  max-width: 36%;
  background: #FFA280;
}
.rap37::after{
  max-width: 37%;
  background: #FFA280;
}
.rap38::after{
  max-width: 38%;
  background: #FFA280;
}
.rap39::after{
  max-width: 39%;
  background: #FFA280;
}
.rap40::after{
  max-width: 40%;
  background: #FFA280;
}
.rap41::after{
  max-width: 41%;
  background: #FFA280;
}
.rap42::after{
  max-width: 42%;
  background: #FFA280;
}
.rap43::after{
  max-width: 43%;
  background: #FFA280;
}
.rap44::after{
  max-width: 44%;
  background: #FFA280;
}
.rap45::after{
  max-width: 45%;
  background: #FFA280;
}
.rap46::after{
  max-width: 46%;
  background: #FFA280;
}
.rap47::after{
  max-width: 47%;
  background: #FFA280;
}
.rap48::after{
  max-width: 48%;
  background: #FFA280;
}
.rap49::after{
  max-width: 49%;
  background: #FFA280;
}
.rap50::after{
  max-width: 50%;
  background: #FDEB80;
}
.rap51::after{
  max-width: 51%;
  background: #FDEB80;
}
.rap52::after{
  max-width: 52%;
  background: #FDEB80;
}
.rap53::after{
  max-width: 53%;
  background: #FDEB80;
}
.rap54::after{
  max-width: 54%;
  background: #FDEB80;
}
.rap55::after{
  max-width: 55%;
  background: #FDEB80;
}
.rap56::after{
  max-width: 56%;
  background: #FDEB80;
}
.rap57::after{
  max-width: 57%;
  background: #FDEB80;
}
.rap58::after{
  max-width: 58%;
  background: #FDEB80;
}
.rap59::after{
  max-width: 59%;
  background: #FDEB80;
}
.rap60::after{
  max-width: 60%;
  background: #FDEB80;
}
.rap61::after{
  max-width: 61%;
  background: #FDEB80;
}
.rap62::after{
  max-width: 62%;
  background: #FDEB80;
}
.rap63::after{
  max-width: 63%;
  background: #FDEB80;
}
.rap64::after{
  max-width: 64%;
  background: #FDEB80;
}
.rap65::after{
  max-width: 65%;
  background: #FDEB80;
}
.rap66::after{
  max-width: 66%;
  background: #FDEB80;
}
.rap67::after{
  max-width: 67%;
  background: #FDEB80;
}
.rap68::after{
  max-width: 68%;
  background: #FDEB80;
}
.rap69::after{
  max-width: 69%;
  background: #FDEB80;
}
.rap70::after{
  max-width: 70%;
  background: #FDEB80;
}
.rap71::after{
  max-width: 71%;
  background: #FDEB80;
}
.rap72::after{
  max-width: 72%;
  background: #FDEB80;
}
.rap73::after{
  max-width: 73%;
  background: #FDEB80;
}
.rap74::after{
  max-width: 74%;
  background: #FDEB80;
}
.rap75::after{
  max-width: 75%;
  background: #A4CF84;
}
.rap76::after{
  max-width: 76%;
  background: #A4CF84;
}
.rap77::after{
  max-width: 77%;
  background: #A4CF84;
}
.rap78::after{
  max-width: 78%;
  background: #A4CF84;
}
.rap79::after{
  max-width: 79%;
  background: #A4CF84;
}
.rap80::after{
  max-width: 80%;
  background: #A4CF84;
}
.rap81::after{
  max-width: 81%;
  background: #A4CF84;
}
.rap82::after{
  max-width: 82%;
  background: #A4CF84;
}
.rap83::after{
  max-width: 83%;
  background: #A4CF84;
}
.rap84::after{
  max-width: 84%;
  background: #A4CF84;
}
.rap85::after{
  max-width: 85%;
  background: #A4CF84;
}
.rap86::after{
  max-width: 86%;
  background: #A4CF84;
}
.rap87::after{
  max-width: 87%;
  background: #A4CF84;
}
.rap88::after{
  max-width: 88%;
  background: #A4CF84;
}
.rap89::after{
  max-width: 89%;
  background: #A4CF84;
}
.rap90::after{
  max-width: 90%;
  background: #A4CF84;
}
.rap91::after{
  max-width: 91%;
  background: #A4CF84;
}
.rap92::after{
  max-width: 92%;
  background: #A4CF84;
}
.rap93::after{
  max-width: 93%;
  background: #A4CF84;
}
.rap94::after{
  max-width: 94%;
  background: #A4CF84;
}
.rap95::after{
  max-width: 95%;
  background: #A4CF84;
}
.rap96::after{
  max-width: 96%;
  background: #A4CF84;
}
.rap97::after{
  max-width: 97%;
  background: #A4CF84;
}
.rap98::after{
  max-width: 98%;
  background: #A4CF84;
}
.rap99::after{
  max-width: 99%;
  background: #A4CF84;
}
.rap100::after{
  max-width: 100%;
  background: #80BB87;
}