.subtitulos_skills{
  color: white;
  padding: 25px;
  font-family: 'Nunito', sans-serif;
}

.progress{
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.container_progress{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.progress:after{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span{
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left{
  left: 0;
}
.progress .progress-bar{
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.progress .progress-left .progress-bar{
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right{
  right: 0;
}
.progress .progress-right .progress-bar{
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: #44484b;
  font-size: 24px;
  color: #fff;
  line-height: 135px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}

/* Java */
.progress.blue .progress-bar{
  border-color: #049dff;
}
.progress.blue .progress-left .progress-bar{
  animation: loading-2 1.5s linear forwards 1.8s;
}

/* HTML5 */
.progress.orange .progress-bar{
  border-color: #ed5f00;
}
.progress.orange .progress-left .progress-bar{
  animation: loading-2 1.5s linear forwards 1.8s;
}

/* CSS */
.progress.blues .progress-bar{
  border-color: #049dff;
}
.progress.blues .progress-left .progress-bar{
  animation: loading-3 1.2s linear forwards 1.8s;
}

/* SQL */
.progress.sql .progress-bar{
  border-color: #bebebe;
}
.progress.sql .progress-left .progress-bar{
  animation: loading-31 1.2s linear forwards 1.8s;
}

/* React */
.progress.react .progress-bar{
  border-color: #2fcfff;
}
.progress.react .progress-left .progress-bar{
  animation: loading-31 1.2s linear forwards 1.8s;
}

/* React */
.progress.flutter .progress-bar{
  border-color: #44b3ef;
}
.progress.flutter .progress-left .progress-bar{
  animation: loading-41 1.2s linear forwards 1.8s;
}

.progress.yellow .progress-bar{
  border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
  animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
  border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
  animation: loading-4 0.8s linear forwards 1.8s;
}
.progress.android .progress-bar{
  border-color: #95be2c;
}
.progress.android .progress-left .progress-bar{
  animation: loading-3 1.2s linear forwards 1.8s;
}

.progress.python .progress-bar{
  border-color: #f3c030;
}
.progress.python .progress-left .progress-bar{
  animation: loading-6 0.4s linear forwards 1.8s;
}

.progress.angular .progress-bar{
  border-color: #cb0025;
}
.progress.angular .progress-left .progress-bar{
  animation: loading-6 0.4s linear forwards 1.8s;
}

.progress.django .progress-bar{
  border-color: #259d69;
}
.progress.django .progress-left .progress-bar{
  animation: loading-5 0.4s linear forwards 1.8s;
}
@keyframes loading-1{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes loading-2{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(155deg);
    transform: rotate(155deg);
  }
}
@keyframes loading-3{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(125deg);
    transform: rotate(125deg);
  }
}

@keyframes loading-31{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
  }
}

@keyframes loading-4{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
  }
}

@keyframes loading-41{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(100deg);
    transform: rotate(100deg);
  }
}

@keyframes loading-5{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes loading-6{
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@media only screen and (max-width: 990px){
  .progress{ margin-bottom: 20px; }
}