/*PERFILES DE LOS PERSONAJES*/
#perfil-cuerpo {
  height: 500px;
  width: 255px;
  overflow: hidden;
  margin-left: -50px;
  -moz-transition: all 1.7s ease-in-out;
  -webkit-transition: all 1.7s ease-in-out;
  transition: all 1.7s ease-in-out;
}

#perfil-nombre {
  width: 255px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  font-family: georgia;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: #0d0d0d;
}

#perfil-avatar {
  width: 255px;
  height: 350px;
  overflow: hidden;
}

#avatar-imagen {
  width: 255px;
  height: 350px;
  position: absolute;
  -moz-transition: all 1.7s ease-in-out;
  -webkit-transition: all 1.7s ease-in-out;
  transition: all 1.7s ease-in-out;
}

#avatar-info {
  width: 235px;
  height: 330px;
  padding: 10px;
  background: #0d0d0d;
}

#info-field {
  display: block;
  height: 292px; /*alto permitido de la caja (330) menos el alto de la caja de contacto (38 : 18 -alto del icono de contacto- + 20 -padding)*/
  overflow: auto; /*si se pasa el tamaño, aparece el scroll*/
}

#campo-nombre {
  display: block;
  background: #000;
  color: #fff;
  padding: 5px;
  line-height: 8px;
  font-family: verdana;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

#campo-info {
  display: block;
  background: #eee;
  color: #000;
  padding: 5px;
  line-height: 8px;
  font-family: verdana;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

#campo-sep {height: 5px; margin-top: 0px; margin-bottom: 0px;}

#info-contacto {
  display: block;
  text-align: center;
  padding: 10px;
  height: 18px; /*alto del icono mas grande*/
}

#perfil-rango {
  width: 255px;
  height: 75px;
}

/*parte del hover*/
#perfil-cuerpo:hover #avatar-imagen {
  margin-left: -300px;
  opacity: 0;
  -moz-transition: all 1.7s ease-in-out;
  -webkit-transition: all 1.7s ease-in-out;
  transition: all 1.7s ease-in-out;
}