header .socials li,
header .toggle{
  overflow: hidden;
  position: relative;
}
header .cards .back{
   transform: rotateX( 0 )  translateZ( 0 );
   -webkit-transform: rotateX( 0 )  translateZ( 0 );
   -moz-transform: rotateX( 0 )  translateZ( 0 );
   -o-transform: rotateX( 0 )  translateZ( 0 );
   -ms-transform: rotateX( 0 )  translateZ( 0 );
   display: block;
}
header .cards{
  position:absolute;
  top: 0;
  left: 0;
  height: 64px;
  transition: top 0.4s ease-in-out;
 -webkit-transition: top 0.4s ease-in-out;
 -moz-transition: top 0.4s ease-in-out;
 -o-transition: top 0.4s ease-in-out;
 -ms-transition: top 0.4s ease-in-out;
}
header .socials li .cards a {
  width: 50px;
  height: 32px;
  position: relative;
}
header .toggle .cards a{
  width: 80px;
  height: 32px;
  position: relative;
}


header li:hover .cards,
header .toggle:hover .cards,
header .visible .cards{
   transform: rotateX( 0deg );
   -webkit-transform: rotateX( 0deg );
   -moz-transform: rotateX( 0deg );
   -o-transform: rotateX( 0deg );
   -ms-transform: rotateX( 0deg );
  top: -32px;
}