@keyframes increase {
  0%{
    width: 0%;
    background-color:#69f0ae;
  }
  10%{
    width: 10%;
    background-color:#69f0ae;
  }
  30%{
    width: 30%;
    background-color:#69f0ae;
  }
  80%{
    width: 80%;
    background-color:#69f0ae;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-hc11{
  0%{
    width: 0%;
    background-color:#db0744;
  }
  10%{
    width: 10%;
    background-color:#db0744;
  }
  30%{
    width: 30%;
    background-color:#db0744;
  }
  80%{
    width: 80%;
    background-color:#db0744;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-datalogger{
  0%{
    width: 0%;
    background-color:#cb20ab;
  }
  10%{
    width: 10%;
    background-color:#cb20ab;
  }
  30%{
    width: 30%;
    background-color:#cb20ab;
  }
  80%{
    width: 80%;
    background-color:#cb20ab;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-rpi-awakens {
  0%{
    width: 0%;
    background-color:#69f0ff;
  }
  10%{
    width: 10%;
    background-color:#69f0ff;
  }
  30%{
    width: 30%;
    background-color:#69f0ff;
  }
  80%{
    width: 80%;
    background-color:#69f0ff;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-esp8266 {
  0%{
    width: 0%;
    background-color:#bbdefb;
  }
  10%{
    width: 10%;
    background-color:#bbdefb;
  }
  30%{
    width: 30%;
    background-color:#bbdefb;
  }
  80%{
    width: 80%;
    background-color:#bbdefb;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-maxipod {
  0%{
    width: 0%;
    background-color:rgb(235,104,0);
  }
  10%{
    width: 10%;
    background-color:rgb(235,104,0);
  }
  30%{
    width: 30%;
    background-color:rgb(235,104,0);
  }
  80%{
    width: 80%;
    background-color:rgb(235,104,0);
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-front-end{
  0%{
    width: 0%;
    background-color:#f0f4c3;
  }
  10%{
    width: 10%;
    background-color:#f0f4c3;
  }
  30%{
    width: 30%;
    background-color:#f0f4c3;
  }
  80%{
    width: 80%;
    background-color:#f0f4c3;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-data-processing{
  0%{
    width: 0%;
    background-color:#b388ff;
  }
  10%{
    width: 10%;
    background-color:#b388ff;
  }
  30%{
    width: 30%;
    background-color:#b388ff;
  }
  80%{
    width: 80%;
    background-color:#b388ff;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase-embedded{
  0%{
    width: 0%;
    background-color:#ff1744;
  }
  10%{
    width: 10%;
    background-color:#ff1744;
  }
  30%{
    width: 30%;
    background-color:#ff1744;
  }
  80%{
    width: 80%;
    background-color:#ff1744;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}
@keyframes increase2 {
  0%{
    width: 0%;
    background-color:#2277FF;
  }
  10%{
    width: 10%;
    background-color:#2277FF;
  }
  30%{
    width: 30%;
    background-color:#2277FF;
  }
  80%{
    width: 80%;
    background-color:#2277FF;
  }
  90%{
    width: 100%;
    background-color:transparent;
    height:6px;
  }
  100%{
    width: 100%;
    height:0px;
  }
}