Perfil - we aint ashes - css

/* P E R F I L E S */
#perfil-cuerpo {
background-color: #fcfcfc;
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
margin: 1px;
width: 242px;
overflow: hidden;
margin-left: -45px;
margin-top: 6px;
}

#perfil-avatar {
outline: 1px solid #f3f3f3;
border: 5px solid #fff;
margin: 1px;
width: 230px;
height: 320px;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
}

#perfil-img img {
width: 230px;
height: 320px;
position: static;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}

#perfil-datos {
width: 220px;
position: absolute;
display: block;
margin-left: 5px;
margin-top: -315px;
overflow: hidden;
}

#datos-info {
outline: 1px solid #f3f3f3;
background: #fcfcfc;
margin: 1px;
margin-bottom: 6px;
padding: 5px;
margin-left: 250px;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}

#info-cont {
  width: 204px;
  background: #fff;
  outline: 1px solid #f3f3f3;
  margin: 1px;
  margin-bottom: 3px;
  padding: 2px;
  font-family: verdana;
  font-size: 8px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
}

#info-sep {display: none;}

#datos-contacto {
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
background: #fff;
margin: 1px;
margin-bottom: 6px;
margin-left: 250px;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}

#perfil-rango {
outline: 1px solid #f3f3f3;
border: 5px solid #fcfcfc;
background: #fff;
margin: 1px;
margin-left: 250px;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
transition-delay: 2s;
}

#perfil-cuerpo:hover #perfil-img img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

#perfil-cuerpo:hover #datos-info, #perfil-cuerpo:hover #datos-contacto, #perfil-cuerpo:hover #perfil-rango {
  margin-left: 0px;
  transition-delay: 1s;
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

#perfil-cuerpo:hover #datos-contacto {transition-delay: 2s; }
#perfil-cuerpo:hover #perfil-rango {transition-delay: 3s; }

#perfil-fijo {
outline: 1px solid #f3f3f3;
border: 5px solid #fff;
background: #fff;
margin: 1px;
width: 230px;
text-align: center;
}

#perfil-nombre, #perfil-nombre a {
  font-family: 'Besom';
  font-size: 20px;
  line-height: 22px;
  text-align: right;
  padding: right: 5px;
  display: block;
}