/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */

/*end reset*/
body {
	font-family: 'Raleway', sans-serif;
	 
	font-size:100%;
}
/* start header */

}
/*--- skills ---*/
.skills{
	background-size: 100% 100%;
	padding:6% 0;
	background:url("../images/skills.jpg") no-repeat;
}
.skills h4{
	font-family: 'Raleway', sans-serif;
 	font-size: 1.1em;
 	color:#fff;
 	font-weight: 600;
}
.pie-wrapper {
  display: inline-block;
  height: 200px;
  margin: 3% 1% 1%;
  position: relative;
  width: 200px;
}
.pie-wrapper .pie {
  clip: rect(0, 200px, 200px, 100px);
  height: 200px;
  position: absolute;
  width: 200px;
}
.pie-wrapper .pie .half-circle {
	border: 5px solid #fff;
	border-radius: 50%;
	clip: rect(0, 100px, 200px, 0);
	height: 185px;
	position: absolute;
	width: 185px;
	margin: 8px;
}
.pie-wrapper .label {
  background: #34495e;
  border-radius: 50%;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 3em;
  height: 160px;
  left: 10%;
  line-height: 3em;
  position: absolute;
  text-align: center;
  top: 25%;
  width: 160px;
  
}
.pie-wrapper .label .smaller {
  color: #bdc3c7;
  font-size: .45em;
  padding-bottom: 20px;
  vertical-align: super;
}
.pie-wrapper.style-2 .shadow {
  border: 5px solid #727272;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
.pie-wrapper.style-2 .label {
  background: none;
  color: #7f8c8d;
}
.pie-wrapper.style-2 .label .smaller {
  color: #bdc3c7;
}
.pie-wrapper.progress-30 .pie .right-side {
  display: none;
}
.pie-wrapper.progress-30 .pie .half-circle {
  
}
.pie-wrapper.progress-30 .pie .left-side {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
}
.pie-wrapper.progress-60 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-60 .pie .right-side {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.pie-wrapper.progress-60 .pie .half-circle {
  
}
.pie-wrapper.progress-60 .pie .left-side {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}
.pie-wrapper.progress-90 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-90 .pie .right-side {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.pie-wrapper.progress-90 .pie .half-circle {
  border-color: #e67e22;
}
.pie-wrapper.progress-90 .pie .left-side {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
}
.pie-wrapper.progress-45 .pie .right-side {
  display: none;
}
.pie-wrapper.progress-45 .pie .half-circle {
  border-color: #fff;
}
.pie-wrapper.progress-45 .pie .left-side {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  transform: rotate(162deg);
}
.pie-wrapper.progress-75 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-75 .pie .right-side {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.pie-wrapper.progress-75 .pie .half-circle {
  border-color: #fff;
}
.pie-wrapper.progress-75 .pie .left-side {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.pie-wrapper.progress-95 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-95 .pie .right-side {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.pie-wrapper.progress-95 .pie .half-circle {
  border-color: #fff;
}
.pie-wrapper.progress-95 .pie .left-side {
  -webkit-transform: rotate(342deg);
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -o-transform: rotate(342deg);
  transform: rotate(342deg);
}

/*--- portfolio ---*/