/* CSS design by @jofpin */
@import url(https://fonts.googleapis.com/css?family=Raleway|Varela+Round|Coda);
@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
.user-profile {
  margin: auto;
  width: 15em; 
  height: 7em;
  background: #fff;
  border-radius: .3em;
  border: 1px solid rgba(139, 136, 136, 0.548);
}

.user-profile  .username {
  margin: auto;
  margin-top: -9.60em;
  margin-left: 10.3em;
  color: #658585;
  font-size: 0.53em;
  font-family: "Coda", sans-serif;
  font-weight: bold;
}

.user-profile  .bio {
  margin: auto;
  margin-top: 1.00em;
  display: inline-block;
  margin-left: 12.7em;
  color: #e76043; 
  font-size: .43em;
  font-family: "varela round", sans-serif;
}
.user-profile > .description {
  margin: auto;
  margin-top: 1em;
  margin-left: 13.8em;

  color: #c0c5c5; 
  font-size: .40em;
  font-family: "varela round", sans-serif;
}


.user-profile  .correo {
    position:absolute;
    margin-top: 1.7em;
    left: 90px;
    color: #730434;
    font-size: 0.43em;
    font-family: "Coda", sans-serif;
    font-weight: bold;
  }


  

.user-profile  .extension {
    position:absolute;
    margin-top: 1.7em;
    left: 350px;
    color: #2c0880;
    font-size: 0.43em;
    font-family: "Coda", sans-serif;
    font-weight: bold;
  }

.user-profile > img.avatar {
	padding: .7em;
  margin-left: .3em;
  margin-top: .3em;
  height: 5.23em;
  width: 5.23em;
  border-radius: 18em;
}

.user-profile ul.data {
	margin: 2em auto;
	height: 1.70em;
  background: #4eb6b6;
  text-align: center;
  border-radius: 0 0 .3em .3em;
}
.user-profile li {
  margin: 0 auto;
  padding: 0.30em; 
  width: 33.33334%;
  display: table-cell;
  text-align: center;
}

.user-profile span {
	font-family: "varela round", sans-serif;
	color: #e3eeee;
  white-space: nowrap;
  font-size: 0.5em;
  font-weight: bold;
}
.user-profile span:hover {
  color: #daebea;
}

/*=================================NORMATIVOS Y LINEAMIENTOS ===============================*/

.divNormativo {
  width: 350px; /* Ancho del div */
  height: 280px; /* Alto del div */
  padding: 10px;
  display: flex; /* Usa el modelo de caja flexible para organizar elementos */
  flex-direction: column; /* Organiza los elementos de arriba a abajo */
  justify-content: space-between; /* Espacio entre los elementos */
  align-items: center; /* Centra los elementos horizontalmente */
  border: 1px solid #ccc; /* Borde para visualización */
  font-family: 'Roboto-Regular'; 
  font-size: 13px;
  line-height: 1;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /* Definición de la sombra */
  color: #333;
  border-radius: 5px; /* Redondea las esquinas */
  overflow: hidden; /* Oculta el contenido que excede el tamaño del div */

}

.divNormativo:hover {
  cursor:pointer;
  border: 2px solid rgb(39, 183, 96);
  color: #0959d8cc;
}

.divNormativo p {
  font-size: 1.4em;
  color:#157272;
   
}

.divNormativo h2 {
  font-size: 3em;
  color:#045151;
   
}