body {
	background: #f9f9f9;
}
#SkillBox {
	font-size: 20px;
	width: 100%;
	height: auto;
	margin: 40px auto;
	background-color: #fff;
	border: 1px solid #cdcdcd;
	padding: 10px;
	border-radius:20px;
	-o-border-radius:20px;
	-webkit-border-radius:20px;
	-ms-border-radius:20px;
	-moz-border-radius:20px;
}
#SkillBox img {
	width: 20%;
	height: 10%;
	margin: auto 35%;
	padding: 10px;
}
.SkillBar {
	width: 100%;
	height: 45px;
	position: relative;
	background: rgba(108, 122, 137, 1);
	margin: 20px auto;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#Skill-HTML {
	width: 100%;
	animation: Animate-HTML 4s;
	-webkit-animation: Animate-HTML 4s;
	-moz-animation: Animate-HTML 4s;
	-o-animation: Animate-HTML 4s;
	height: 45px;
	position: absolute;
	background-color: #F9690E;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-HTML {
a from {
 width: 10px;
}
to {
	width: 100%
}
}
@-webkit-keyframes Animate-HTML {
 from {
 width: 10px;
}
to {
	width: 100%
}
}
@-moz-keyframes Animate-HTML {
 from {
 width: 10px;
}
to {
	width: 100%
}
}
@-o-keyframes Animate-HTML {
 from {
 width: 10px;
}
to {
	width: 100%
}
}
#Skill-CSS {
	animation: Animate-CSS 5s;
	-webkit-animation: Animate-CSS 5s;
	-moz-animation: Animate-CSS 5s;
	-o-animation: Animate-CSS 5s;
	width: 70%;
	height: 45px;
	position: absolute;
	background-color: #66CC99;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-CSS {
 from {
 width: 10px;
}
to {
	width: 70%
}
}
@-webkit-keyframes Animate-CSS {
 from {
 width: 10px;
}
to {
	width: 70%
}
}
@-moz-keyframes Animate-CSS {
 from {
 width: 10px;
}
to {
	width: 70%
}
}
@-o-keyframes Animate-CSS {
 from {
 width: 10px;
}
to {
	width: 70%
}
}
#Skill-jQuery {
	animation: Animate-jQuery 5s;
	-webkit-animation: Animate-jQuery 5s;
	-moz-animation: Animate-jQuery 5s;
	-o-animation: Animate-jQuery 5s;
	width: 40%;
	height: 45px;
	position: absolute;
	background-color: #D2527F;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-jQuery {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
@-webkit-keyframes Animate-jQuery {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
@-moz-keyframes Animate-jQuery {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
@-o-keyframes Animate-jQuery {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
#Skill-JS {
	animation: Animate-JS 4s;
	-webkit-animation: Animate-JS 4s;
	-moz-animation: Animate-JS 4s;
	-o-animation: Animate-JS 4s;
	width: 65%;
	height: 45px;
	position: absolute;
	background-color: #EF4836;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-JS {
 from {
 width: 10px;
}
to {
	width: 65%
}
}
@-webkit-keyframes Animate-JS {
 from {
 width: 10px;
}
to {
	width: 65%
}
}
@-moz-keyframes Animate-JS {
 from {
 width: 10px;
}
to {
	width: 65%
}
}
@-o-keyframes Animate-JS {
 from {
 width: 10px;
}
to {
	width: 65%
}
}
#Skill-XML {
	animation: Animate-XML 4s;
	-webkit-animation: Animate-XML 4s;
	-moz-animation: Animate-XML 4s;
	-o-animation: Animate-XML 4s;
	width: 40%;
	height: 45px;
	position: absolute;
	background-color: #446CB3;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-XML {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
@-webkit-keyframes Animate-XML {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
@-moz-keyframes Animate-XML {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
@-o-keyframes Animate-XML {
 from {
 width: 10px;
}
to {
	width: 40%
}
}
#Skill-C {
	animation: Animate-C 4s;
	-webkit-animation: Animate-C 4s;
	-moz-animation: Animate-C 4s;
	-o-animation: Animate-C 4s;
	width: 30%;
	height: 45px;
	position: absolute;
	background-color: #674172;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-C {
 from {
 width: 10px;
}
to {
	width: 30%
}
}
@-webkit-keyframes Animate-C {
 from {
 width: 10px;
}
to {
	width: 30%
}
}
@-moz-keyframes Animate-C {
 from {
 width: 10px;
}
to {
	width: 30%
}
}
@-o-keyframes Animate-C {
 from {
 width: 10px;
}
to {
	width: 30%
}
}
#Skill-JAVA {
	animation: Animate-JAVA 4s;
	-webkit-animation: Animate-JAVA 4s;
	-moz-animation: Animate-JAVA 4s;
	-o-animation: Animate-JAVA 4s;
	width: 25%;
	height: 45px;
	position: absolute;
	background-color: #52B3D9;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-JAVA {
 from {
 width: 10px;
}
to {
	width: 25%
}
}
@-webkit-keyframes Animate-JAVA {
 from {
 width: 10px;
}
to {
	width: 25%
}
}
@-moz-keyframes Animate-JAVA {
 from {
 width: 10px;
}
to {
	width: 25%
}
}
@-o-keyframes Animate-JAVA {
 from {
 width: 10px;
}
to {
	width: 25%
}
}
#Skill-PHP {
	animation: Animate-PHP 4s;
	-webkit-animation: Animate-PHP 4s;
	-moz-animation: Animate-PHP 4s;
	-o-animation: Animate-PHP 4s;
	width: 50%;
	height: 45px;
	position: absolute;
	background-color: #F7CA18;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-PHP {
 from {
 width: 10px;
}
to {
	width: 50%
}
}
@-webkit-keyframes Animate-PHP {
 from {
 width: 10px;
}
to {
	width: 50%
}
}
@-moz-keyframes Animate-PHP {
 from {
 width: 10px;
}
to {
	width: 50%
}
}
@-o-keyframes Animate-PHP {
 from {
 width: 10px;
}
to {
	width: 50%
}
}
#Skill-SQL {
	animation: Animate-SQL 4s;
	-webkit-animation: Animate-SQL 4s;
	-moz-animation: Animate-SQL 4s;
	-o-animation: Animate-SQL 4s;
	width: 80%;
	height: 45px;
	position: absolute;
	background-color: #1BA39C;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-SQL {
 from {
 width: 10px;
}
to {
	width: 80%
}
}
@-webkit-keyframes Animate-SQL {
 from {
 width: 10px;
}
to {
	width: 80%
}
}
@-moz-keyframes Animate-SQL {
 from {
 width: 10px;
}
to {
	width: 80%
}
}
@-o-keyframes Animate-SQL {
 from {
 width: 10px;
}
to {
	width: 80%
}
}
#Skill-VBNET {
	animation: Animate-VBNET 4s;
	-webkit-animation: Animate-VBNET 4s;
	-moz-animation: Animate-VBNET 4s;
	-o-animation: Animate-VBNET 4s;
	width: 35%;
	height: 45px;
	position: absolute;
	background-color: #F39C12;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
@keyframes Animate-VBNET {
 from {
 width: 10px;
}
to {
	width: 35%
}
}
@-webkit-keyframes Animate-VBNET {
 from {
 width: 10px;
}
to {
	width: 35%
}
}
@-moz-keyframes Animate-VBNET {
 from {
 width: 10px;
}
to {
	width: 35%
}
}
@-o-keyframes Animate-VBNET {
 from {
 width: 10px;
}
to {
	width: 35%
}
}
.Skill-Area {
	z-index: 1;
	float: left;
	position: absolute;
	margin-top: 10px;
	margin-left: 10px;
	text-shadow: none;
	color: #fff;
	font-family: Lato-Regular, sans-serif;
	font-size: 18px;
}
.PercentText {
	z-index: 3;
	position: relative;
	margin-right: 10px;
	/*margin-top: 10px;*/
	float: right;
	text-shadow: none;
	color: #fff;
	font-family: Lato-Regular, sans-serif;
	font-size: 18px;
}
/* Pure CSS3 jQuery-Like fadeIn
---------------------------------------------------- */
.fadeIn {
	/* CSS needed for animation
	---------------------------------------------------- */
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
/* Animation Times - Time for image to fade in
---------------------------------------------------- */
.fadeIn-3s {
	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	-o-animation-duration:3s;
	animation-duration:3s;
}
.fadeIn-5s {
	-webkit-animation-duration:5s;
	-moz-animation-duration:5s;
	-o-animation-duration:5s;
	animation-duration:5s;
}
/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */
.fadeIn-Delay-3s {
	-webkit-animation-delay:3s;
	-moz-animation-delay:3s;
	-o-animation-delay:3s;
	animation-delay:3s;
}
.fadeIn-Delay-5s {
	-webkit-animation-delay:5s;
	-moz-animation-delay:5s;
	-o-animation-delay:5s;
	animation-delay:5s;
}

/* Key Frames
---------------------------------------------------- */
@-webkit-keyframes fadeIn {
from {
opacity:0;
}
to {
	opacity:1;
}
}
@-moz-keyframes fadeIn {
from {
opacity:0;
}
to {
	opacity:1;
}
}
@-o-keyframes fadeIn {
from {
opacity:0;
}
to {
	opacity:1;
}
}
@keyframes fadeIn {
from {
opacity:0;
}
to {
	opacity:1;
}
}
 @media only screen and (max-width: 40em) {
.responsive-percent {
 margin-right: -45px !important;
}
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
.responsive-percent {
 margin-right: -45px !important;
}
}

.footer-base {
	background:#343433;
	color:#fff;
	width: 100%;
	padding:20px 0 50px 0
}
.footer-base a {
	color:#fff;
	text-decoration:none
}
.footer-base a:hover {
	color:#7ea4f5
}


.mrgn-10-top {
	margin-top:10px
}
.mrgn-20-top {
	margin-top:20px
}
.mrgn-30-top {
	margin-top:30px
}
.mrgn-40-top {
	margin-top:40px
}
.mrgn-10-bottom {
	margin-bottom:10px
}
.mrgn-20-bottom {
	margin-bottom:20px
}
.mrgn-30-bottom {
	margin-bottom:30px
}
.mrgn-40-bottom {
	margin-bottom:40px
}