.skills-list {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 10px;
}
.skills-list-fe {
    max-width: 835px;
}
.skills-list-be {
    max-width: 428px;
}
.skill-list-des {
    max-width: 640px;
}
.skill-list-des {
    padding-bottom: 30px;
}
.rank {
	font-weight:300;
}

@media screen and (min-width:0) and (max-width:846px) {
	.skills-chart .chart-legend li {
		height: 629px;
	}
    .skills-list-be .skills-chart .chart-legend li {
        height: 261px;
    }
    .skill-list-des .skills-chart .chart-legend li  {
        height: 440px;
    }
	.skills-list {
		margin-top: 110px;
		max-width: 87%;
	}
}
.skills-chart {
    margin-top: 40px;
}
.skills-chart .chart-title {
    margin: 0 0 160px 0;
}
.skills-chart .chart-title span {
    font-size: 100%;
    color: #fff;
}
.skills-chart ul {
    position: relative;
    list-style: none;
}
.skills-chart .chart-legend {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
}
.skills-chart .chart-legend li {
    position: relative;
    width: 18%;
    display: inline-block;
    background: url('../images/line.svg') no-repeat 100% 2.2%;
}
.skills-chart .chart-legend .legend-label {
    position:absolute;
    top:-60px;
    right:-35px;
    display:block;
    font-size:.8em;
    line-height:1;
    -webkit-transform: rotate(50deg);
    -webkit-transform-origin: 100% 0;
    -moz-transform: rotate(50deg);
    -moz-transform-origin: 100% 0;
    -ms-transform: rotate(50deg);
    -ms-transform-origin: 100% 0;
    -o-transform: rotate(50deg);
    -o-transform-origin: 100% 0;
    transform: rotate(50deg);
    transform-origin: 100% 0;
    width: 200px;
    text-align: right;
    font-weight:300;
}
.skills-chart .chart-legend li.label05 .legend-label {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.skills-chart .chart-data {
    padding-top: 30px;
    margin: 0;
}
.skills-chart .chart-data li {
    border-left: 1px solid #fff;
}
.skills-chart .chart-data .data-bar {
    background: url("../images/skill-bar-graph-h.svg") no-repeat 100% 50%;
}
.skills-chart .chart-data .data-label {
    line-height: 60px;
    font-size: .938em;
    margin-left: 4px;
    font-weight: 300;
}
.skills-chart .chart-data .bar01 .data-bar {
    width:70%;
}
.skills-chart .chart-data .bar02 .data-bar {
    width:70%;
}
.skills-chart .chart-data .bar03 .data-bar {
    width:44%;
}
.skills-chart .chart-data .bar04 .data-bar {
    width:18%;
}
.skills-chart .chart-data .bar05 .data-bar {
    width:34%;
}
.skills-chart .chart-data .bar06 .data-bar {
    width: 18%
}
.skills-chart .chart-data .bar07 .data-bar {
    width:60%;
}
.skills-chart .chart-data .bar08 .data-bar {
    width: 60%;
}
.skills-chart .chart-data .bar09 .data-bar {
    width: 60%;
}
.skills-chart .chart-data .bar10 .data-bar {
    width: 58%;
}
.skills-chart .chart-data .bar11 .data-bar {
    width: 70%;
}
.skills-chart .chart-data .bar12 .data-bar {
    width: 55.3%;
}
.skills-chart .chart-data .bar13 .data-bar {
    	width: 30%;
    }

@media screen and (min-width:480px) {

}

@media screen and (min-width:600px) {
	.skills-chart .chart-legend .legend-label {
		font-size: .9em;
	}
}

@media screen and (max-width:768px) {
    .skills-list-be .skills-chart .chart-legend li,
    .skill-list-des .skills-chart .chart-legend li {
        margin-top: 9px;
    }
    .skills-chart .chart-legend li {
        margin-top: 0;
    }
}

@media screen and (min-width:1024px) {
	.skills-chart {
		margin-bottom: 100px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	.skills-chart .chart-title {
		margin: 0 0 -25px 0;
	}
	.skills-chart ul {
		position: relative;
		list-style: none;
	}
	.skills-chart .chart-legend {
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.skills-chart .chart-legend li {
		position: absolute;
		left: 0;
		float: none;
		border-bottom: 1px solid #fff;
		width: 100%;
	}
	.skills-chart .chart-legend li.label01 {
		top: 220px;
	}
	.skills-chart .chart-legend li.label02 {
		top: 165px;
	}
	.skills-chart .chart-legend li.label03 {
		top: 110px;
	}
	.skills-chart .chart-legend li.label04 {
		top: 55px;
	}
	.skills-chart .chart-legend li.label05 {
		top: 0;
	}
	.skills-chart .chart-legend .legend-label {
		position: static;
		float: right;
		top: auto;
		left: auto;
		display: block;
		font-size: 80%;
		line-height: 1.1;
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: 0 0;
		-moz-transform: rotate(0deg);
		-moz-transform-origin: 0 0;
		-ms-transform: rotate(0deg);
		-ms-transform-origin: 0 0;
		-o-transform: rotate(0deg);
		-o-transform-origin: 0 0;
		transform: rotate(0deg);
		transform-origin: 0 0;
		width: 18%;
		padding-top: 1px;
		height: 36px;
		border-right: 5px solid #000;
		margin-top: 16px;
		text-align: left;
	}
    .skills-chart .chart-legend .legend-label-be {
        width: 32%;
    }
    .skills-chart .chart-legend .legend-label-des {
        width: 24%;
    }
	.skills-chart .chart-legend li.label01 .legend-label {
		border-right-color: #f44b00;
	}
	.skills-chart .chart-legend li.label02 .legend-label {
		border-right-color: #f4b800;
	}
	.skills-chart .chart-legend li.label03 .legend-label {
		border-right-color: #beca7d;
	}
	.skills-chart .chart-legend li.label04 .legend-label {
		border-right-color: #8ebd7b;
	}
	.skills-chart .chart-legend li.label05 .legend-label {
		-webkit-background-size: 35px;
		-moz-background-size: 35px;
		-o-background-size: 35px;
		background-size: 35px;
	}
	.skills-chart .chart-data {
		padding-top: 0;
		margin: 0;
		width: 86%;
		float: left;
		}
	.skills-chart .chart-data li {
		border-left: 0 none;
		height: 218px;
		position: relative;
		margin-top: 54px;
		width: 45px;
		float: left;
		margin-right: 22px;
	}
	.skills-chart .chart-data .data-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		background: url('../images/skill-bar-graph.svg') no-repeat 50% 0;
	}
	.skills-chart .chart-data .data-bar.bbq {
		background: url("../images/skill-bar-graph-h.svg") no-repeat 50% 0;
	}
	.skills-chart .chart-data .data-label {
		position: absolute;
		bottom: -25px;
		left: 52%;
		line-height: 1;
		font-size: 80%;
		margin-left: 0;
		-webkit-transform: rotate(45deg);
		-webkit-transform-origin: 0 0;
		-moz-transform: rotate(45deg);
		-moz-transform-origin: 0 0;
		-ms-transform: rotate(45deg);
		-ms-transform-origin: 0 0;
		-o-transform: rotate(45deg);
		-o-transform-origin: 0 0;
		transform: rotate(45deg);
		transform-origin: 0 0;
		width: 140px;
	}
	.skills-chart .chart-data .bar01 .data-bar {
		width: 100%;
		height: 70%;
	}
	.skills-chart .chart-data .bar02 .data-bar {
		width: 100%;
		height: 70%;
	}
	.skills-chart .chart-data .bar03 .data-bar {
		width: 100%;
		height: 40%;
	}
	.skills-chart .chart-data .bar04 .data-bar {
		width: 100%;
		height: 25%;
	}
	.skills-chart .chart-data .bar05 .data-bar {
		width: 100%;
		height: 46%;
	}
	.skills-chart .chart-data .bar06 .data-bar {
		width: 100%;
		height: 25%;
	}
	.skills-chart .chart-data .bar07 .data-bar {
		width: 100%;
		height: 60%;
	}
	.skills-chart .chart-data .bar08 .data-bar {
		width: 100%;
		height: 60%;
	}
	.skills-chart .chart-data .bar09 .data-bar {
		width :100%;
		height: 60%;
	}
	.skills-chart .chart-data .bar10 .data-bar {
		width :100%;
		height: 65%;
	}
	.skills-chart .chart-data .bar11 .data-bar {
		width: 100%;
		height: 75%;
	}
	.skills-chart .chart-data .bar12 .data-bar {
		width: 100%;
		height: 50%;
	}
    .skills-chart .chart-data .bar13 .data-bar {
		width: 100%;
		height: 35%;
	}
}

@media screen and (min-width:1200px) {
	.skills-chart {
	}
}