.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:56px;
	right:40px;
	/* background-color:#28a745; */
	background-color:#000;
	color:#FFF;
	/* border: 1px solid white; */
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	z-index:1000;
	animation: bot-to-top 2s ease-out;
}

ul.social{
	position:fixed;
	right:40px;
	padding-bottom:20px;
	bottom:80px;
	z-index:100;
}
ul.social li{
	list-style:none;
	margin-bottom:10px;
}
ul.social li a{
	background-color:#000;
	color:#FFF;
	/* border: 1px solid white; */
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	width:60px;
	height:60px;
	display:block;
}
ul.social:hover{
	visibility:visible!important;
	opacity:1!important;
}

.my-float{
	font-size:24px;
	margin-top:18px;
}

a#menu-social + ul{
  visibility: hidden;
}
a#menu-social:hover + ul{
  visibility: visible;
  animation: scale-in 0.5s;
}
a#menu-social i{
	animation: rotate-in 0.5s;
}
a#menu-social:hover > i{
	animation: rotate-out 0.5s;
}

@keyframes bot-to-top {
    0%   {bottom:-40px}
    50%  {bottom:40px}
}
@keyframes scale-in {
    from {transform: scale(0);opacity: 0;}
    to {transform: scale(1);opacity: 1;}
}
@keyframes scale-out {
    from {transform: scale(1);opacity: 1;}
    to {transform: scale(0);opacity: 0;}
}
@keyframes rotate-in {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes rotate-out {
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}