/* Panneau */
#social
{
position: fixed;
z-index: 2;
width: 420px;
height: 100vh;
top: 0;
background: white;
box-shadow: 0 0 100px rgba(0,0,0,0);
transition: box-shadow 1s, left 1s, right 1s;
}
#social.gauche {left: -420px;}
#social.droite {right: -420px;}
body.social #social {box-shadow: 0 0 100px rgba(0,0,0,0.5);}
body.social #social.gauche {left: 0px;}
body.social #social.droite {right: 0px;}
@media (max-width: 500px) {
	#social {width: 300px;}
}

/* Chargement */
#social:before
{
content: '';
position: absolute;
width: 46px;
height: 46px;
left: calc(50% - (46px / 2));
top: calc(50vh - (46px / 2));
background: url(FB.svg) no-repeat center;
background-size: contain;
animation: tourne3d 1.5s linear infinite;
}

/* Bouton */
#social + button.social
{
z-index: 1;
position: fixed;
width: 48px;
height: 48px;
top: 24px;
background: url(FB.svg) no-repeat center;
background-size: contain;
border: none;
transition: transform 0.25s;
}
#social.gauche + button.social {left: 24px;}
#social.droite + button.social {right: 24px;}
#social + button.social:hover {transform: scale(1.1) rotate(-5deg);}
body.social #social + button.social {}