/*============================*/
/*	skills
/*============================*/

.skills-list

	> div
		height: 220px
		position: relative

	.skill
		width: 220px
		height: 220px
		line-height: 220px
		text-align: center
		position: absolute
		top: 0

		svg
			width: 100% !important
			height: 100% !important

			.circle
				stroke: $main-color !important

		span
			+position(absolute,0)


		&.pull-right
			right: 0

		&.pull-left
			left: 0


	.text

		&.pull-right
			padding-left: 240px
			text-align: left

		&.pull-left
			padding-right: 240px
			text-align: right

	.heading
		margin: 0 0 15px 0

	p
		color: #707070


@media (max-width: 990px)
	.skills-list
		> div
			.skill
				height: 200px
				width: 200px
				line-height: 200px

		.text
			&.pull-right
				padding-left: 200px
			&.pull-left
				padding-right: 200px

@media (max-width: 765px)
	.skills-list
		> div
			.skill
				height: 150px
				width: 150px
				line-height: 150px

		.text
			&.pull-right
				padding-left: 150px
			&.pull-left
				padding-right: 150px


.skill.style-2

	position: relative

	.chart
		width: 130px
		height: 130px
		line-height: 130px
		text-align: center
		position: relative
		float: left

		@media (max-width: 990px)
			width: 100px
			height: 100px
			line-height: 100px

		span
			+position(absolute,0)
			font-size: 30px
			color: $main-color
			font-family: $primary-font

			@media (max-width: 990px)
				font-size: 18px

			&:after
				content: "%"
				margin: 0 5px

	.heading , p
		padding: 0 0 0 150px
		margin: 0 0 5px

		@media (max-width: 990px)
			padding: 0 0 0 120px

	p
		color: #808080
		font-size: 13px