@import url(https://fonts.googleapis.com/css?family=Expletus+Sans);

/* Basic resets */

.TituloSkills{


    padding-top: 4%;
	font-family: 'Inconsolata', monospace;

    text-align: center;
    color:black;
}
.TituloSkillGlobal{
	padding-top: 30px;
	font-family: 'Playfair Display', serif;
	color:black;

	text-align: center;
  }
.skills-bar-container{
    background-color: rgba(121, 113, 113, 0.712);

}
.back{
	position: relative;
	float: right;
}
.tituloHab{

	font-family: 'Inconsolata', monospace;
	font-size: 20px;

}

 .skills-bar-container li {
	 position: relative;
	 width: 100%;
	 padding: 5px;
	 margin-bottom: 10px;
}
 .skills-bar-container li .progressbar-title {
	 color: black;
}
 .skills-bar-container li .progressbar-title h3 {
	 display: inline-block;
}

 .skills-bar-container li .bar-container {
	 background: #555;
	 position: relative;
	 width: 100%;
	 height: 5px;
	 margin-top: 5px;
	 display: block;
	
}
 .skills-bar-container li .bar-container .progressbar {
	 position: absolute;
	 width: 0%;
	 height: 100%;
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 -ms-border-radius: 5px;
	 border-radius: 5px;
	 -webkit-animation-duration: 2s;
	 animation-duration: 2s;
	 -webkit-animation-timing-function: ease-out;
	 animation-timing-function: ease-out;
	 -webkit-animation-fill-mode: both;
	 animation-fill-mode: both;
}
 .skills-bar-container li .bar-container #progress-html {
	 -webkit-animation-name: progress-html;
	 animation-name: progress-html;
	 -webkit-animation-delay: 0.7s;
	 animation-delay: 0.7s;
}
 .skills-bar-container li .bar-container #progress-css {
	 -webkit-animation-name: progress-css;
	 animation-name: progress-css;
	 -webkit-animation-delay: 1.4s;
	 animation-delay: 1.4s;
}
 .skills-bar-container li .bar-container #progress-javascript {
	 -webkit-animation-name: progress-javascript;
	 animation-name: progress-javascript;
	 -webkit-animation-delay: 2.1s;
	 animation-delay: 2.1s;
}
 .skills-bar-container li .bar-container #progress-php {
	 -webkit-animation-name: progress-php;
	 animation-name: progress-php;
	 -webkit-animation-delay: 2.8s;
	 animation-delay: 2.8s;
}
 .skills-bar-container li .bar-container #progress-angular {
	 -webkit-animation-name: progress-angular;
	 animation-name: progress-angular;
	 -webkit-animation-delay: 3.5s;
	 animation-delay: 3.5s;
}
 .progressred {
	 background-color: #c0392b;
}
 .progressblue {
	 background-color: #19f;
}
 .progresspurple {
	 background-color: #9b59b6;
}
 .progressorange {
	 background-color: #ffa500;
}
 .progressgreen {
	 background-color: #27ae60;
}
 @-webkit-keyframes progress-html {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 100%;
	}
}
 @-webkit-keyframes progress-css {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 90%;
	}
}
 @-webkit-keyframes progress-javascript {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 70%;
	}
}
 @-webkit-keyframes progress-php {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 55%;
	}
}
 @-webkit-keyframes progress-angular {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 65%;
	}
}
 @-moz-keyframes progress-html {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 100%;
	}
}
 @-moz-keyframes progress-css {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 90%;
	}
}
 @-moz-keyframes progress-javascript {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 70%;
	}
}
 @-moz-keyframes progress-php {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 55%;
	}
}
 @-moz-keyframes progress-angular {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 65%;
	}
}
 @keyframes progress-html {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 100%;
	}
}
 @keyframes progress-css {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 90%;
	}
}
 @keyframes progress-javascript {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 70%;
	}
}
 @keyframes progress-php {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 55%;
	}
}
 @keyframes progress-angular {
	 0% {
		 width: 0%;
	}
	 100% {
		 width: 65%;
	}
}