@font-face {
    font-family: "Soberana Sans";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("SoberanaSans/SoberanaSans-Regular.otf");
}
@font-face {
    font-family: "SoberanaSans-Bold";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("SoberanaSans/SoberanaSans-Bold.otf") format("otf"), url("/SoberanaSans/SoberanaSans-Bold") format("otf");
}
body{
	box-sizing:border-box;
	padding:0;
	margin:0;
		font-size:16px;
line-height: 34px;
	font-family:"Soberana Sans";
  font-weight: normal;
	text-align:left;
}
p{
  margin: 0 0 10px;
    font-family:"Soberana Sans";
  font-size: 16px;
}
.middleTable{
	display:inline-block;
		background:#f2f2f24d;
		text-align:left;	
		width: 99%;		


}
textarea{
	text-align: justify;
  white-space: normal;
  padding: 10px;
  color: black;
  font-size: 16px;
  background:#fff;
}
table{
	background:#c9d1db;
	width: 100%;		
	text-align: justify;
		font-size:14px;


}
table,tbody,td,th,tr{
	border: none;
	border-collapse:collapse;
}
table tr td:first-child.no {width: 3%; }
table tbody tr th:first-child.no {width: 3%; }

table tr td.no {width: 10%; 	text-align: left;
}
table tbody tr th.no {width: 10%; 	text-align: left;
}
 th,.subtitulo {
	text-align: left;
	vertical-align: middle;
	font-size:16px;
}
/*
#a{
	width:700px;
	min-width:450px;
	background:red;
	display:inline-block;
	margin:10px;
}*/

h2,h1{
	background:#502b4c;
	color:#fff;
	padding:12px;	text-align:left;

}

h3{
	font-size:16px;
}
h2,h1{
	font-size:26px;
}

h1,h2{
  background:#fff;
  font-size:36px;
  color:#6b6b6b;
  padding:12px; text-align:left;
}
table th,.subtitulo{
	background:#e4e4e4;
	color:black;
	border-bottom: 3px ridge #121327;
	padding:12px;
}

tr:nth-child(even){
	background:#eef1f6;/*#f0f0f0;*/
}

tr:nth-child(odd){
	background:#fff;
}

tr:nth-child(even):hover, tr:nth-child(odd):hover{
	background:#e6dded;
}

tr td{
		padding:10px;

}
/*
.subtitulo .no, .subtitulo .nivel, .elementoa .no, .elementoa .nivel, .elementob .no, .elementob .nivel {
	width:20%;
	float:left;
}

.subtitulo .nombre, .elementoa .nombre, .elementob .nombre{
	width:60%;
	float:left;
	text-align:left;
}
*/
ul{
		text-align:justify;

}

 a{
	color:#6b6b6b;
}
 a:hover{
	color:#f90;
}

 td a:hover{
	color:#f90;
}

 /*th a{
	color:#fff;
}

 th a:hover{
	color:#ccc;
}*/

b, strong {
    font-weight: bold;
}







.vertical-skills {
    margin-top: 5px;
    text-align: center; 
    display: inline-block;
    height: 150px;
    width: 300px;}
    .vertical-skills li {
      display: inline-block;
      position: relative;
      width: 50px;
      height: 100px;
      background: #f0f0f0;
      margin: 0 15px; }
      @media (max-width: 400px) {
        .vertical-skills li {
          width: 25px; } }
      .vertical-skills li span.skills {
        position: absolute;
        animation-duration: 3s;
       animation-name: height;
background-image:
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( bottom, #d50000 , #ff9100 50px, #09c );
     background-image:
     -webkit-linear-gradient(top, 
                             rgba(255, 255, 255, .25), 
                             rgba(0, 0, 0, .25)),
     -webkit-linear-gradient(bottom, #d50000 , #ff9100 50px, #09c);/* #ff9e2c , #4ecdc4 110px, #09c );/*25px, #4ecdc4 80px, #09c 160px);/*#f44 50px, #09c 130px);*/

        left: 0;
        right: 0;
        bottom: 0; }
      .vertical-skills li span.title {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: -35px; }

        /* ANIMATIONS */
@keyframes height {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    height: 0;
  }
  100% {
    max-height: 100%;
  }
}









.skill-list {
 list-style: none;
  margin: 0;
  padding: 0;
      list-style-type: none;

}

.skill a{
 /* display: block;
  float: bottom;
       width: 60px;*/
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
bottom: -30px;
}
.skill progress{
 /* display: block;
  float: top;
       width: 200px;*/position: absolute;
        animation-duration: 3s;
       animation-name: height;
        left: 0;
        right: 0;

bottom: 0.5;
}
.skill {
/*margin-bottom: 1em;
  position: relative;
  display: block;
  float: left;*/
   display: inline-block;
      position: relative;
      width: 90px;
      height: 60px;
margin: 0 10px; 

}


progress, progress[role] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
    width: 100%;
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
  background-size: auto;

}
.tres::-moz-progress-bar{
    background-image:
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #d50000 , #ff9100 60px, #09c );
    
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    
}

.tres::-webkit-progress-bar, #blue {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.tres::-webkit-progress-value, #blue{
  background-image:
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #d50000 , #ff9100 60px, #09c);/* #ff9e2c , #4ecdc4 110px, #09c );/*25px, #4ecdc4 80px, #09c 160px);/*#f44 50px, #09c 130px);*/
	
    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}


/** Paging **/
.paging {
  /*background:#a6a590;*/
  color: #ccc;
  margin-top: 1em;
  clear:both;
}


.paging a {
  text-decoration: none;
  cursor: pointer; 
  padding: 3px 3px;
  color: rgb(113, 138, 190);
  display: inline-block;
}
.paging .active a{
  color: #201f20;
}

.paging > li {
  display: inline-block;
  border-left: 0;
}