ol{
  position:absolute;
  top:50%;
  left: 50%;e
  transform: translate(-50%,-50%);
  margin:0;
  padding: 0;
  display: flex;

}

ol li {
list-style:none;
}

ol li a{
position:relative;
width:60px;
height:60px;
background-color: #f1f1f1;
display:block;
text-align:center;
margin:0 10px;
border-radius:50%;
padding:6px;
box-sizing:border-box;
text-decoration: none;
box-shadow:0 10px 15px rgba(0,0,0,.3);
background:linear-gradient(0deg,#ddd,#fff);
transition:.5s;

}

ol li a:hover{
 box-shadow:0 2px 5px rgba(0,0,0,.3);
}

ol li a .fa{
 width: 100%;
height: 100%;
display:block;
background:linear-gradient(0deg,#fff,#ddd);
border-radius:50%;
line-height:50px;
font-size:24px;
color:#262626;
transition:.5s;
}

ol li:nth-child(1) a:hover .fa{
color:#3b5998;
}
ol li:nth-child(2) a:hover .fa{
color:#55acee;
}
ol li:nth-child(3) a:hover .fa{
color:#dd4b39;
}
ol li:nth-child(4) a:hover .fa{
color:#0077B5;
}
ol li:nth-child(5) a:hover .fa{
color:#bc2a8d;
}


.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}

.my-float{
margin-top:16px;
}