/***/
.chart-container {
	padding-top: 1em;
	padding-bottom: 1em;
	overflow: hidden;
}

.chart {
	clear: both;
	padding: 0;
	width: 100%;
}

ul.chart {
	margin: 0;
}

.chart .percent, .chart .data {
	display: block;
}

.chart li .data {
	display: none;
}
.bar:hover {
	min-height: 18% !important;
}

@media (min-width: 700px) {
	.chart {
		background: url("http://cl.ly/QSpc/bg-chart.png") right top repeat-x;
		height: 425px;
		margin: 0 auto emCalc(-32px);
	}

	ul.chart {
		margin: 0 0 0 3em;
	}

	.chart .percent, .chart .data {
		display: none;
	};
}

.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);
}

.chart li:hover {
}

.chart li:hover .data {
	display: block;
}

@media (min-width: 700px) {
	.chart li {
		display: inline-block;
		height: 425px;
		margin: 0 0.4% 0 0;
		width: 2% !important;
		-webkit-transition: width 0.6s, height 0.6s, -webkit-transform 0.6s;
		transition: width 0.6s, height 0.6s, transform 0.6s;
	}

	.chart .axis:hover {
		width: 7% !important;
	}

	.chart li:hover {
		margin: 0 0.8% 0 0;
		width: 14% !important;
	}

	.chart li:hover .percent,.chart li:hover .data {
		display: block;
	};
}

.chart .axis {
	display: none;
	top: emCalc(-45px);
	width: 7% !important;
}

@media (min-width: 700px) {
	.chart .axis {
		display: inline-block;
	};
}

.chart .label {
	background: #cccccc;
	margin: -9px 0 77px 0;
}

.chart .percent,.chart .data {
	opacity: .8;
	width: 100%;
}

@media (min-width: 700px) {
	.chart .percent,.chart .data {
      /* position: absolute; */
		font-size: 0.8em;
		line-height: 1.4;
	};
}

.chart .percent span {
	font-size: 30px;
	font-size: 1.875rem;
}

.chart .skill {
	font-weight: 800;
	opacity: .5;
	overflow: hidden;
	text-transform: uppercase;
	width: 100%;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1.2;
}

@media (min-width: 700px) {
	.chart .skill {
		bottom: 5px;
		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: -o-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: -o-linear-gradient(#ff9e9e, #ff6b6b 70%);
	background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
	background-image: linear-gradient(#ff9e9e, #ff6b6b 70%);
}

.chart .lime {
	background: #97f464;
	border: 1px solid #97f464;
	background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
	background-image: -o-linear-gradient(#b7f794, #97f464 70%);
	background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
	background-image: linear-gradient(#b7f794, #97f464 70%);
}

.chart .peach {
	background: #ffcd92;
	border: 1px solid #ffcd92;
	background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
	background-image: -o-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: -o-linear-gradient(#c594f7, #ab64f4 70%);
	background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
	background-image: linear-gradient(#c594f7, #ab64f4 70%);
}