/*
 * StyleName:		skill.css
 * Email:		trung.styles@gmail.com
 *
 */

#tab,
#skill {
	margin: 5px auto 2vw;
	background: rgba(255, 255, 255, .5);
	width: 90vw;
	max-width: 1200px;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, .12),
		0 1px 2px rgba(0, 0, 0, .24);
}
#tab ul {
	list-style: none outside none;
	margin: 0;
	padding: 0 1.5vw;
}
#tab li {
	cursor: pointer;
	float: left;
	padding: 1.5vw;
	color: #607D8B;
	font-size: 150%;
	font-weight: 600;
	position: relative;
	transition: all .3s ease;
}
#tab li:hover,
#tab li.active {
	color: #3F51B5;
}
#tab li:before {
	content: "";
	margin: auto;
	background: #2196F3;
	height: 3px;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	transition: all .3s ease;
}
#tab li.active:before {
	left: 0;
	right: 0;
}

#skill {
	padding: 3vw;
}
#skill .tab {
	background: #FEFEFE;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, .12),
		0 1px 2px rgba(0, 0, 0, .24);
}
#skill .main {
	display: none;
	color: #606060;
	transition: none;
}
#skill .main.active {
	display: block;
}
#skill .group {
}
#skill .group + .group {
	margin-top: 50px;
}
#skill .block {
	float: left;
	margin: 10px 0;
	padding: 0 0 30px;
	padding-right: 2.5%;
	width: 50%;
	position: relative;
}
#skill .block:nth-of-type(even) {
	float: right;
	padding-left: 2.5%;
}
#skill .block:before {
}
#skill .sub {
}
#skill .name {
	margin: 10px 0;
	padding-left: 30px;
	color: #FF5722;
	font-size: 150%;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: relative;
	overflow: hidden;
}
#skill .sub + .name {
	margin-top: 30px;
}
#skill .name:before {
	content: "";
	margin: auto;
	background: #FF5722;
	width: 20px;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
#skill .caption {
	color: #607D8B;
	font-size: 125%;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-height: 22px;
	overflow: hidden;
}
#skill .level {
	background: #FEFEFE;
	height: 20px;
	border-radius: 10px;
	position: absolute;
	left: 0;
	right: 5%;
	bottom: 4px;
	box-shadow: 0 5px 15px 0 rgba(7, 33, 66, .15);
	overflow: hidden;
}
#skill .block:nth-of-type(even) .level {
	left: 5%;
	right: 0;
}
#skill .level:before {
	content: "";
	margin: auto;
	background-image: -webkit-gradient(linear, left top, right top, from(#072142), color-stop(42%, #8c2b7a), to(#FF4D5A));
	background-image: -webkit-linear-gradient(left, #072142, #8c2b7a 42%, #FF4D5A);
	background-image: -o-linear-gradient(left, #072142, #8c2b7a 42%, #FF4D5A);
	background-image: linear-gradient(to right, #072142, #8c2b7a 42%, #FF4D5A);
	width: 0;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	transition: all .3s ease;
}
#skill .block.animate .level[data="1"]:before {
	width: 1%;
}
#skill .block.animate .level[data="2"]:before {
	width: 2%;
}
#skill .block.animate .level[data="3"]:before {
	width: 3%;
}
#skill .block.animate .level[data="4"]:before {
	width: 4%;
}
#skill .block.animate .level[data="5"]:before {
	width: 5%;
}
#skill .block.animate .level[data="6"]:before {
	width: 6%;
}
#skill .block.animate .level[data="7"]:before {
	width: 7%;
}
#skill .block.animate .level[data="8"]:before {
	width: 8%;
}
#skill .block.animate .level[data="9"]:before {
	width: 9%;
}
#skill .block.animate .level[data="10"]:before {
	width: 10%;
}
#skill .block.animate .level[data="11"]:before {
	width: 11%;
}
#skill .block.animate .level[data="12"]:before {
	width: 12%;
}
#skill .block.animate .level[data="13"]:before {
	width: 13%;
}
#skill .block.animate .level[data="14"]:before {
	width: 14%;
}
#skill .block.animate .level[data="15"]:before {
	width: 15%;
}
#skill .block.animate .level[data="16"]:before {
	width: 16%;
}
#skill .block.animate .level[data="17"]:before {
	width: 17%;
}
#skill .block.animate .level[data="18"]:before {
	width: 18%;
}
#skill .block.animate .level[data="19"]:before {
	width: 19%;
}
#skill .block.animate .level[data="20"]:before {
	width: 20%;
}
#skill .block.animate .level[data="21"]:before {
	width: 21%;
}
#skill .block.animate .level[data="22"]:before {
	width: 22%;
}
#skill .block.animate .level[data="23"]:before {
	width: 23%;
}
#skill .block.animate .level[data="24"]:before {
	width: 24%;
}
#skill .block.animate .level[data="25"]:before {
	width: 25%;
}
#skill .block.animate .level[data="26"]:before {
	width: 26%;
}
#skill .block.animate .level[data="27"]:before {
	width: 27%;
}
#skill .block.animate .level[data="28"]:before {
	width: 28%;
}
#skill .block.animate .level[data="29"]:before {
	width: 29%;
}
#skill .block.animate .level[data="30"]:before {
	width: 30%;
}
#skill .block.animate .level[data="31"]:before {
	width: 31%;
}
#skill .block.animate .level[data="32"]:before {
	width: 32%;
}
#skill .block.animate .level[data="33"]:before {
	width: 33%;
}
#skill .block.animate .level[data="34"]:before {
	width: 34%;
}
#skill .block.animate .level[data="35"]:before {
	width: 35%;
}
#skill .block.animate .level[data="36"]:before {
	width: 36%;
}
#skill .block.animate .level[data="37"]:before {
	width: 37%;
}
#skill .block.animate .level[data="38"]:before {
	width: 38%;
}
#skill .block.animate .level[data="39"]:before {
	width: 39%;
}
#skill .block.animate .level[data="40"]:before {
	width: 40%;
}
#skill .block.animate .level[data="41"]:before {
	width: 41%;
}
#skill .block.animate .level[data="42"]:before {
	width: 42%;
}
#skill .block.animate .level[data="43"]:before {
	width: 43%;
}
#skill .block.animate .level[data="44"]:before {
	width: 44%;
}
#skill .block.animate .level[data="45"]:before {
	width: 45%;
}
#skill .block.animate .level[data="46"]:before {
	width: 46%;
}
#skill .block.animate .level[data="47"]:before {
	width: 47%;
}
#skill .block.animate .level[data="48"]:before {
	width: 48%;
}
#skill .block.animate .level[data="49"]:before {
	width: 49%;
}
#skill .block.animate .level[data="50"]:before {
	width: 50%;
}
#skill .block.animate .level[data="51"]:before {
	width: 51%;
}
#skill .block.animate .level[data="52"]:before {
	width: 52%;
}
#skill .block.animate .level[data="53"]:before {
	width: 53%;
}
#skill .block.animate .level[data="54"]:before {
	width: 54%;
}
#skill .block.animate .level[data="55"]:before {
	width: 55%;
}
#skill .block.animate .level[data="56"]:before {
	width: 56%;
}
#skill .block.animate .level[data="57"]:before {
	width: 57%;
}
#skill .block.animate .level[data="58"]:before {
	width: 58%;
}
#skill .block.animate .level[data="59"]:before {
	width: 59%;
}
#skill .block.animate .level[data="60"]:before {
	width: 60%;
}
#skill .block.animate .level[data="61"]:before {
	width: 61%;
}
#skill .block.animate .level[data="62"]:before {
	width: 62%;
}
#skill .block.animate .level[data="63"]:before {
	width: 63%;
}
#skill .block.animate .level[data="64"]:before {
	width: 64%;
}
#skill .block.animate .level[data="65"]:before {
	width: 65%;
}
#skill .block.animate .level[data="66"]:before {
	width: 66%;
}
#skill .block.animate .level[data="67"]:before {
	width: 67%;
}
#skill .block.animate .level[data="68"]:before {
	width: 68%;
}
#skill .block.animate .level[data="69"]:before {
	width: 69%;
}
#skill .block.animate .level[data="70"]:before {
	width: 70%;
}
#skill .block.animate .level[data="71"]:before {
	width: 71%;
}
#skill .block.animate .level[data="72"]:before {
	width: 72%;
}
#skill .block.animate .level[data="73"]:before {
	width: 73%;
}
#skill .block.animate .level[data="74"]:before {
	width: 74%;
}
#skill .block.animate .level[data="75"]:before {
	width: 75%;
}
#skill .block.animate .level[data="76"]:before {
	width: 76%;
}
#skill .block.animate .level[data="77"]:before {
	width: 77%;
}
#skill .block.animate .level[data="78"]:before {
	width: 78%;
}
#skill .block.animate .level[data="79"]:before {
	width: 79%;
}
#skill .block.animate .level[data="80"]:before {
	width: 80%;
}
#skill .block.animate .level[data="81"]:before {
	width: 81%;
}
#skill .block.animate .level[data="82"]:before {
	width: 82%;
}
#skill .block.animate .level[data="83"]:before {
	width: 83%;
}
#skill .block.animate .level[data="84"]:before {
	width: 84%;
}
#skill .block.animate .level[data="85"]:before {
	width: 85%;
}
#skill .block.animate .level[data="86"]:before {
	width: 86%;
}
#skill .block.animate .level[data="87"]:before {
	width: 87%;
}
#skill .block.animate .level[data="88"]:before {
	width: 88%;
}
#skill .block.animate .level[data="89"]:before {
	width: 89%;
}
#skill .block.animate .level[data="90"]:before {
	width: 90%;
}
#skill .block.animate .level[data="91"]:before {
	width: 91%;
}
#skill .block.animate .level[data="92"]:before {
	width: 92%;
}
#skill .block.animate .level[data="93"]:before {
	width: 93%;
}
#skill .block.animate .level[data="94"]:before {
	width: 94%;
}
#skill .block.animate .level[data="95"]:before {
	width: 95%;
}
#skill .block.animate .level[data="96"]:before {
	width: 96%;
}
#skill .block.animate .level[data="97"]:before {
	width: 97%;
}
#skill .block.animate .level[data="98"]:before {
	width: 98%;
}
#skill .block.animate .level[data="99"]:before {
	width: 99%;
}
#skill .block.animate .level[data="100"]:before {
	width: 100%;
}
#skill .level:after {
	content: "0%";
	margin: auto;
	color: #072142;
	font-size: 90%;
	font-weight: 500;
	line-height: 20px;
	text-shadow:
		0 0 1px rgba(255, 255, 255, .5),
		1px 0 1px rgba(255, 255, 255, .5),
		0 1px 1px rgba(255, 255, 255, .5),
		1px 1px 1px rgba(255, 255, 255, .5),
		-1px 0 1px rgba(255, 255, 255, .5),
		0 -1px 1px rgba(255, 255, 255, .5),
		-1px 1px 1px rgba(255, 255, 255, .5),
		1px -1px 1px rgba(255, 255, 255, .5),
		-1px -1px 1px rgba(255, 255, 255, .5);
	position: absolute;
	top: 0;
	right: 3px;
	bottom: 0;
}
#skill .level[data]:after {
	content: attr(data) "%";
}
#skill .level[data=""]:after {
	content: "0%";
}

#skill .button {
	margin-top: 25px;
	padding-top: 25px;
	text-align: center;
	border-top: 1px dotted #DFDFDF;
}
#skill .link {
	display: inline-block;
	margin: auto;
	padding: 10px;
	color: #FEFEFE;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	background: #007AF5;
	min-width: 200px;
	border-radius: 5px;
	transition: all .3s ease;
}
#skill .link:hover {
	background: #2893FF;
}
#skill a.link {
	text-decoration: none;
}