MINI MINI MANI MO

/*-----------------------------------------------------------------------------------

	Shortcodes: counter-skills.less

-----------------------------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Counter
-----------------------------------------------------------------*/


.counter {
	font-size: 42px;
	font-weight: 600;
	font-family: @heading-font;

	&.counter-small {
		font-size: 28px;
	}

	&.counter-large {
		font-size: 56px;
	}

	&.counter-xlarge {
		font-size: 64px;
		font-weight: 400;
	}

	&.counter-inherit {
		font-size: inherit;
		font-weight: inherit;
	}

	+ h5 {
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-top: 10px;
	}

	&.counter-lined {
		+ h5 {
			&:before {
				display: block;
				position: relative;
				margin: 20px auto 25px auto;
				content: '';
				width: 15%;
				border-top: 2px solid #444;
				opacity: 0.9;
			}
		}
	}

	&.counter-small {
		+ h5 {
			font-size: 13px;
		}
	}

	&.counter-large,
	&.counter-xlarge {
		+ h5 {
			font-size: 15px;
			font-weight: 300;
		}
	}
}

.widget .counter + h5 { opacity: 0.7; }


/* ----------------------------------------------------------------
	Animated Rounded Skills
-----------------------------------------------------------------*/


.rounded-skill {
	display: inline-block;
	margin: 0 15px 15px;

	+ h5 {
		margin-bottom: 0;
	}
}

body:not(.device-touch) .rounded-skill {
	-webkit-transition: opacity .4s ease;
	-o-transition: opacity .4s ease;
	transition: opacity .4s ease;
}

.easyPieChart {
	display: inline-block;
	position: relative;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #333;

	i {
		font-size: 42px;
	}

	canvas {
		position: absolute;
		top: 0;
		left: 0;
	}
}


/* ----------------------------------------------------------------
	Skills Bar
-----------------------------------------------------------------*/


.skills {
	margin: 0;
	list-style: none;
	padding-top: 25px;

	li {
		position: relative;
		margin-top: 38px;
		height: 4px;
		background-color: #F5F5F5;
		box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		.border-radius(2px);

		&:first-child {
			margin-top: 0;
		}

		.progress {
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			background-color: @theme-color;
			overflow: visible !important;
			.border-radius(2px);
			-webkit-transition: width 1.2s ease-in-out;
			-o-transition: width 1.2s ease-in-out;
			transition: width 1.2s ease-in-out;
		}

		.progress-percent {
			position: absolute;
			top: -28px;
			right: 0;
			background-color: #333;
			color: #F9F9F9;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
			height: 22px;
			line-height: 22px;
			padding: 0px 5px;
			font-size: 11px;
			.border-radius(2px);

			.counter {
				font-weight: 400;
				font-family: @body-font;
			}

			&:after,
			&:before {
				top: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
			}

			&:after {
				border-top-color: #333;
				border-width: 4px;
				left: 50%;
				margin-left: -4px;
			}

			&:before {
				border-top-color: #333;
				border-width: 5px;
				left: 50%;
				margin-left: -5px;
			}
		}

		> span {
			position: absolute;
			z-index: 1;
			top: -23px;
			left: 0;
			line-height: 20px;
			font-size: 12px;
			font-weight: bold;
			text-transform: uppercase;
			color: #222;
		}
	}
}