/* PROGRESS BAR */

.progress-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: start;
  align-items: flex-start;
}

.progress-bar {
  position: relative;
  width: 550px;
  box-sizing: border-box;
}
.progress-bar:not(:last-child) {
  margin-bottom: 35px;
}

.progress-bar--lg-offset:not(:last-child) {
  margin-bottom: 52.5px;
}

.progress-bar__bar,
.progress-bar__bar-inner,
.progress-bar__value,
.progress-bar__skill {
  box-sizing: border-box;
}

.progress-bar__bar {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.progress-bar__bar--no-overflow {
  overflow: visible;
}

.progress-bar__bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.progress-bar__bar-inner.js-animated {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.1, 1.14, 0.31, 1.06);
  transition-timing-function: cubic-bezier(0.1, 1.14, 0.31, 1.06);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.progress-bar__skill,
.progress-bar__value {
  font-size: 14px;
  letter-spacing: 1px;
}

.progress-bar__value--aligned-value {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* TESTEEEEEEEEEEEEEEEEEEEEEEEE  */
.progress-bar__bar-inner.progress-bar__bar-inner--3.toolChild-1.js-animated,
.progress-bar__value.progress-bar__value--3.toolChild-1 {
  background-color: #f40076;
}
.progress-bar__value.toolChild-1:after {
  border-top-color: #f40076;
}

.progress-bar__bar-inner.progress-bar__bar-inner--3.toolChild-2.js-animated,
.progress-bar__value.progress-bar__value--3.toolChild-2 {
  background-color: #1a936f;
}
.progress-bar__value.toolChild-2:after {
  border-top-color: #1a936f;
}

.progress-bar__bar-inner.progress-bar__bar-inner--3.toolChild-3.js-animated,
.progress-bar__value.progress-bar__value--3.toolChild-3 {
  background-color: #2274a5;
}
.progress-bar__value.toolChild-3:after {
  border-top-color: #2274a5;
}

/* END TESTEEEEEEEEEEEEEEE */

/* progress bar #3 styles */
.progress-bar--3 {
  height: 5px;
  background-color: #efefef;
}

/*
.progress-bar--3:nth-child(1) .progress-bar__bar-inner,
.progress-bar--3:nth-child(1) .progress-bar__value {
  background-color: #f40076;
}
.progress-bar--3:nth-child(1) .progress-bar__bar-inner:after,
.progress-bar--3:nth-child(1) .progress-bar__value:after {
  border-top-color: #f40076;
}
.progress-bar--3:nth-child(2) .progress-bar__bar-inner,
.progress-bar--3:nth-child(2) .progress-bar__value {
  background-color: #1a936f;
}
.progress-bar--3:nth-child(2) .progress-bar__bar-inner:after,
.progress-bar--3:nth-child(2) .progress-bar__value:after {
  border-top-color: #1a936f;
}
.progress-bar--3:nth-child(3) .progress-bar__bar-inner,
.progress-bar--3:nth-child(3) .progress-bar__value {
  background-color: #2274a5;
}
.progress-bar--3:nth-child(3) .progress-bar__bar-inner:after,
.progress-bar--3:nth-child(3) .progress-bar__value:after {
  border-top-color: #2274a5;
}
*/
.progress-bar__skill--3 {
  position: absolute;
  top: -24px;
  left: -20px;
  opacity: 0;
}
.progress-bar__skill--3.js-animated {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  left: 0;
  opacity: 1;
}

.progress-bar__value--3 {
  position: absolute;
  top: -43px;
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  color: #fff;
  opacity: 0;
}
.progress-bar__value--3:after {
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: block;
  width: 0;
  height: 0;
  content: "";
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 5px solid;
}
.progress-bar__value--3.js-animated {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
  top: -33px;
  opacity: 1;
}
/* END PROGRESS BAR */

/* PRODUCT SETS */
.vertical-bars .bar .usage {
  display: block;
  background: #e67e22;
  height: 250px;
  width: 40px;
  position: relative;
  font-size: small;
}
.vertical-bars .bar .usage small {
  position: absolute;
  top: 0;
  right: -35px;
}
.vertical-bars .bar .usage-value {
  background: #d35400;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%;
}
.vertical-bars .bar .usage-value small {
  background: #2c3e50;
  z-index: 5;
}

ul.vertical-bars {
  margin: 0 0 0 -10px;
  padding: 0;
}
ul li.bar {
  display: inline-block;
  margin-left: 10px;
  width: 10%;
  text-align: left;
}

span.progress-bar__skill {
  color: black;
}

/* END PRODUCT SETS */