.show-skillbar {
  display: block;
  padding: 0;
  margin-bottom: 2.4rem;
}

.show-skillbar:last-of-type {
  margin-bottom: 0;
}

.skillbar {
  position: relative;
  width: 100%;
  height: 4rem;
  border-bottom: 3px solid var(--cinza-light);
}

.skillbar.light {
  border-bottom: 3px solid var(--cinza-dark);
}

.skillbar-title {
  position: absolute;
  top: 0;
  left: 2px;
  font: normal 700 2rem/1.1 "HelveticaNeueLight", serif;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--cinza-dark);
  height: 4rem;
  line-height: 4.6rem;
}

.skillbar-title.light {
  color: var(--white);
}

.skillbar-bar {
  display: inline-block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0px;
  height: 3px;
  background: -webkit-linear-gradient(
    135deg,
    var(--cinza-dark) 0%,
    var(--cinza-light) 30%,
    var(--cinza-medium) 70%,
    var(--cinza-dark) 100%
  );
  background: -moz-
    oldlinear-gradient(
      135deg,
      var(--cinza-dark) 0%,
      var(--cinza-light) 30%,
      var(--cinza-medium) 70%,
      var(--cinza-dark) 100%
    );
  background: -o-linear-gradient(
    135deg,
    var(--cinza-dark) 0%,
    var(--cinza-light) 30%,
    var(--cinza-medium) 70%,
    var(--cinza-dark) 100%
  );
  background: linear-gradient(
    -45deg,
    var(--cinza-dark) 0%,
    var(--cinza-light) 30%,
    var(--cinza-medium) 70%,
    var(--cinza-dark) 100%
  );
}

.skill-bar-percent {
  display: block;
  position: absolute;
  top: 0;
  right: 2px;
  font: normal 700 2rem/1.1 "HelveticaNeueLight", serif;
  color: var(--cinza-dark);
  height: 4rem;
  line-height: 4.6rem;
}

.skill-bar-percent.light {
  color: var(--white);
}