/* ==============================
   Skill pie chart
   ============================== */

.chart {
	position: relative;
	display: block; /*-- from inline-block to block --*/
	width: 218px; /*-- changend from 110px to 210px and then to 218px --*/
	height: 210px; /*--changend from 110px to 210px --*/
	/*-- margin-top: 50px;
	margin-bottom: 50px; --*/
	margin: 0 auto;
	text-align: center;
	color: white; /*-- I added text color --*/
	font-size: 2em; /*-- I added for text size --*/
}

.chart canvas {
	position: absolute;
	top: 15px; /*-- changend from 0 to 15px --*/
	left: 3px; /*-- changend from 0 to 3px --*/
	/*-- added tis so the circular bar end point/beggining point is alligned to the center of the watch line --*/
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}

.percent {
	position: relative; /*-- I added this so the number shows through if you use a background image for the web page --*/
    top: 15px;
    left: 5px;
	color: #f5f5f5;
	display: inline-block;
	line-height: 220px; /*-- changend from 110px to 210px to 220px --*/
	font-size: 1.6em; /*-- I added to increase the size of the percent number --*/
	z-index: 2;
}

.percent-sign{
	position: absolute;
	color: #f5f5f5;
	top: 123px; 
	left: 143px; 
	font-size: 15px; 
	z-index:1
}

.watch-container{
    position: relative; 
    overflow: hidden; 
    padding-top: 30px;
}

.watch-container-img{
	/*--height: 710px; 
	width: 710px;--*/
    height: 358px;
    width: 455px;
   
}

.watch-img{
	position: relative; 
	/*--left: -245px; --*/
   /*-- overflow: hidden;
    position: absolute;
    top: -31px;
    left: -117px;
    right: -121px;--*/
    left: -117px;
	top: -251px; 
	z-index: 0;
}

.skill-icon-container{
	position: relative; 
	bottom: 169px; /*-- changend from 168px to 169px for flat watch design --*/
}

.slider-icon{
	margin-top: -10px; 
	list-style: none;
}

.slider-icon li{
	padding-left: 39px;
}

.skill-text-container{
	position: relative; 
	top: -242px; /*-- changend from -255px to -254px and to -252px to -242px because of flat design watck --*/
}

.slider-text{
	margin-top: -10px; 
	color: #f5f5f5; 
	text-align: center; 
	list-style: none;
}

.slider-text li{
	padding-right: 65px; /*-- changed from 70px to 65px --*/
}

.pr-5{
	padding-right: 5px;
}

.percent:after {
	/*-- display: none; --*/
	/*-- I added so the precent sign does not display --*/
	/*-- content: '%'; --*/
	/*-- margin-left: 0.1em; --*/
	/*-- font-size: 20px; --*/
	/*-- changend from .8em to 20px make it smaller --*/
}