.chart {
  clear: both;
  padding: 0;
  width: 100%;
}
@media (min-width: 700px) {
  .chart {
    height: 250px;
    margin: 0 auto emCalc(-32px);
  }
}
.chart li {
  display: block;
  height: 125px;
  padding: emCalc(25px) 0;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
  -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
@media (min-width: 700px) {
  .chart li {
    display: inline-block;
    height: 250px;
    margin: 30px 1.8% 0 0;
    width: 25%;
  }
}
.chart .axis {
  display: none;
  top: emCalc(-45px);
  width: 8%;
}
@media (min-width: 700px) {
  .chart .axis {
    display: inline-block;
  }
}
.chart .label {
  background: #cccccc;
  margin: -9px 0 71px 0;
}
.chart .percent {
  letter-spacing: -3px;
  opacity: .4;
  width: 100%;
  font-size: 20px;
  font-size: 1.875rem;
}
@media (min-width: 700px) {
  .chart .percent {
    position: absolute;
    font-size: 25px;
    margin-top:10px;
  }
}
.chart .percent span {
  font-size: 18px;
  font-size: 1.3rem;
}
.chart .skill {
  font-weight: 800;
  opacity: .5;
  overflow: hidden;
  text-transform: uppercase;
  width: 100%;
  font-size: 14px;
  font-size: 0.875rem;
}
@media (min-width: 700px) {
  .chart .skill {
    bottom: 20px;
    position: absolute;
    font-size: 16px;
    font-size: 1rem;
  }
}
.chart .teal {
  background: #4ecdc4;
  border: 1px solid #4ecdc4;
  background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
  background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
  background-image: linear-gradient(#76d8d1, #4ecdc4 70%);
}
.chart .salmon {
  background: #ff6b6b;
  border: 1px solid #ff6b6b;
  background-image: -moz-linear-gradient(#ff9e9e, #ff6b6b 70%);
  background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
  background-image: linear-gradient(#ff9e9e, #ff6b6b 70%);
}
.chart .salmon img{
margin-top:70%;
}
.chart .lime {
  background: #97f464;
  border: 1px solid #97f464;
  background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
  background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
  background-image: linear-gradient(#b7f794, #97f464 70%);
}
.chart .peach img{
margin-top:45%;
}
.chart .peach {
  background: #ffcd92;
  border: 1px solid #ffcd92;
  background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
  background-image: -webkit-linear-gradient(#ffe4c5, #ffcd92 70%);
  background-image: linear-gradient(#ffe4c5, #ffcd92 70%);
}
.chart .grape {
  background: #ab64f4;
  border: 1px solid #ab64f4;
  background-image: -moz-linear-gradient(#c594f7, #ab64f4 70%);
  background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
  background-image: linear-gradient(#c594f7, #ab64f4 70%);
}